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基于 互联 网 的 电子 商务 平台 是 任何 企业 或 个 人 打开 市 场 的 一 条 捷径 ， 
但 措 建 一 个 专业 的 电子 商务 平台 需要 投入 大 量 的 成 本 并 由 专业 人 员 进 行 
才 可 能 成 功 ， 所 以 很 多 企业 和 个 人 望而却步 。 本 书 所 讲述 的 内 容 就 是 
现在 最 先进 的 PHP-MySQL 技术 搭建 一 个 专业 的 电子 商务 平台 。 书 中 六 
细 介 绍 了 电子 商务 网 站 的 前 期 策划 、 网 站 开发 平台 的 搭建 、 网 站 页 面 的 
计 、 复 杂 电 子 购物 功能 的 实现 、 后 期 的 管理 应 用 以 及 电子 商务 网 站 的 运 
方法 等 内 容 。 
本 书 适合 正在 寻找 电子 商务 网 站 经 营 之 道 的 管理 者 ， 也 可 作为 大 专 院 
校 电 子 商 务 专业 和 网 络 营 销 专业 学 生 、 开 始 搭 建 独 立 网 上 销售 系统 的 人 
员 、 网 站 编程 人 员 的 参考 书 。 
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互联 网 的 


1. 
有 些 人 认为 ， 做 一 个 
务 。 其 实 ， 这 是 一 个 


面 ， 只 是 起 到 广 而 告 之 的 作用 。 


ETAZ FAEM 
营销 型 电子 商务 网 站 


网 站 挂 到 互联 网 上 ， 输 入 指定 的 域名 能 打开 企业 网 站 就 是 进行 电 
部 分 企业 所 做 的 网 站 都 是 “名 片 式 ”的 
外 子 商 务 是 指 在 全 球 各 地 广泛 上 


民 大 的 误区 。 目 前 ， 


网 


的 应 


易 和 
型 的 


在 线 
商业 运营 模式 。 


EIk, EERE 
天 力 。 但 是 ， 淘 宝 网 站 以 近 500 亿 的 年 营业 额 ， 
企业 ; PPG AWER 
E JL, JEJ 


—— 


EI 


传统 行业 尤 
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过 了 我 国人 


和 场 的 一 条 捷径 。 
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小 企业 ， 面 临 
F 何 一 
超过 了 同期 的 任何 一 家 传统 服装 企业 。 显 而 
或 个 人 打开 


着 前 所 
家 商业 


ESA 
静态 


的 商业 贸易 活动 中 ， 


方式 ， 买 卖 双方 不 谋面 而 进行 各 种 商贸 活动 ， 实 现 网 | 
BE 子 支付 以 及 各 种 商务 活动 、 交 易 活动 、 金 融 活 动 和 相关 的 综合 服务 活动 的 一 种 新 


一 个 完整 的 电子 商务 网 站 要 


(1) 产品 展示 功能 


LL 备 如 下 功能 : 


Ta 


基于 互 


购物、 商户 之 间 的 网 上 交 


产品 展示 功能 即 可 以 在 后 台 按 分 类 和 索引 目录 自主 上 传 所 要 销售 的 产品 图 片 。 在 后 台 
开发 的 时 候 通常 包括 一 级 目录 和 二 级 子 目 录 。 子 目录 有 时 在 组 织 上 很 方便 。 例 如 ， 一 个 工业 
内 应 品 商会 有 成 千 上 万 种 被 分 类 的 产品 ， 像 这 样 的 公司 在 建立 电子 商务 网 站 时 ， 对 产品 分 类 
展示 是 很 重要 的 。 

(2) 产品 的 搜索 引擎 

网 站 可 以 利用 数据 库 和 信息 检索 技术 为 用 户 提供 对 产品 及 其 他 信息 的 查询 功能 。 查 询 
功能 可 以 包括 关键 词 查 询 、 分 类 查询 及 组 合 查 询 等 。 通 过 搜索 引擎 的 查询 功能 ， 用 户 可 以 方 
便 、 快 捷 地 在 网 站 上 找到 所 需要 的 产品 及 服务 方面 的 信息 。 


(3) 网 上 订购 功能 


上 订购 功能 是 指 为 浏览 网 站 的 消费 者 提供 包括 网 上 采购 及 填 


网 
(4) 网 上 结算 功能 
网 上 结算 功能 是 指 通过 后 台 程 序 自动 统计 结算 ， 


写 订 购 单 等 功能 。 


并 实现 用 户 、 商 家 与 银行 之 间 的 结 


算 。 只 有 实现 了 网 上 结算 ， 才 标志 着 真正 意义 上 的 电子 商务 活动 。 

(5) 网 络 售后 服务 

在 进行 电子 商务 活动 的 过 程 中 ， 实 现 网 络 售后 服务 的 功能 是 很 重要 的 。 利 用 人 工 智 能 中 的 机 
器 学 习 、 知 识 表示 ， 使 得 网 站 能 自动 地 回答 用 户 提出 的 各 种 问题 ， 包 括 一 般 性 服务 和 销售 查询 问 
题 ， 还 能 把 回答 不 了 的 问题 转交 给 客户 服务 部 ， 让 他 们 来 回答 。 这 种 技术 目前 被 普遍 应 用 。 


(6) 营销 功能 


营销 功能 非常 重要 。 在 互联 网 3 


F 台 上 的 推广 往往 是 和 技术 相 结合 的 ， 如 SEO 搜索 引擎 


JI 
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的 优化 (SEO) 营销， 在 网 站 搭建 的 时 候 就 要 充分 考虑 进去 ， 包 括 关键 词 的 选择 、 关 键 词 在 


网 页 上 的 分 布 及 链接 策略 等 。 如 果 说 
的 画册 ， 并 不 是 一 个 营销 型 的 网 站 。 
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站 只 是 企业 随便 搭建 的 一 个 平 


络 营销 是 全 程 整合 营 


人 
IL» 


[A 3X Hie Ts 


销 的 过 程 ， 从 开始 有 运营 项 目 想 


法 的 时 候 就 要 充分 考虑 终端 市 场 的 需求 ， 把 所 要 采用 的 营销 手段 充分 融入 搭建 的 平台 上 ， 这 


才 是 正确 的 做 法 。 
2. 电子 商务 网 站 模式 


目前 公认 的 电子 商务 网 站 模式 可 以 分 为 三 种 ， 即 B2B 模式 、B2C 模式 和 C2C 模式 。 


(1) B2B 模式 


企业 对 企业 CBusiness to Business). 的 电子 商务 提供 商务 信息 平 


人 
I» 


供 买 卖 双 方 的 企业 


在 平台 上 发 布 供求 信息 、 寻 找 合 作 伙伴 、 在 线 交 易 、 跟 踪 服 务 等 。 可 以 在 企业 内 部 〈 内 部 结 


算 平 台 )， 也 可 以 在 企业 之 间 进 行 。 国 内 的 阿 上 
模式 。 
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(2) B2C 模式 


里 巴巴 网 站 


企业 对 顾客 (Business to Customer) 的 电子 商务 。 主 要 是 企业 开设 产品 专卖 电子 商店 ， 


在 互联 网 上 向 顾客 出 售 企业 产品 ， 提 高 物流 速度 ， 节 省 商店 的 场地 、 管 理 、 人 员 等 费用 。 


特点 类 似 于 现实 商务 世界 中 的 零售 ， 如 当当 网 
(3) C2C 模式 


顾客 对 顾客 (Customer to Customer) 的 日 


卖 ， 而 买方 可 以 自 
网 站 (图 3)。 


IV 


站 (图 2)。 


尼子 商务 是 消费 者 对 消费 者 的 交易 模式 。C2C 
电子 商务 平台 就 是 通过 为 买卖 双方 提供 一 个 在 线 交 易 平 台 ， 使 卖方 可 以 主动 提供 商品 上 网 拍 


行 选择 商品 进行 范 价 。 其 特点 类 似 于 现实 商务 世界 中 的 跳 章 市场， 如 淘宝 
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图 3 淘宝 网 站 


针对 不 同 的 群体 所 要 建立 的 电子 商务 网 站 的 模式 是 不 一 相 
建立 B2C 模式 的 电子 商务 网 站 ， 个 人 宜 在 C2C H 
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B2C 电子 商城 实用 型 网 站 是 在 网 络 上 建立 一 个 虚拟 的 购物 商场 ， 让 访问 者 在 网 络 上 购 
物 。 网 上 购物 以 及 网 上 商店 的 出 现 ， 避 免 了 挑选 商品 的 烦琐 过 程 ， 让 人 们 的 购物 过 程 变 得 轻 
松 、 快 捷 、 方 便 ， 很 适合 现代 人 快 节奏 的 生活 ; 同时 又 能 有 效 地 控制 “商场 ”运营 的 成 本 ， 
开辟 了 一 个 新 的 销售 渠道 。 本 书 实例 是 使 用 PHP+MySQL 直接 用 手写 程序 完成 的 实例 ， 完 
成 的 首页 如 图 4 所 示 。 
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图 4 IRAE T EY 
本 网 站 主要 能 够 实现 的 功能 如 下 : 
1) 开发 了 强大 的 搜索 以 及 高 级 查询 功能 ， 能 够 快捷 地 找到 感 兴趣 的 商品 。 
2) 采取 会 员 制 保证 交易 的 安全 性 。 
3) 流畅 的 会 员 购 物流 程 浏览 一 将 商品 放 入 购物 车 一 结算 。 每 个 会 员 有 自己 专用 的 购 
物 车 ， 可 随时 订购 自己 中 意 的 商品 并 结账 完成 购物 。 购 物 的 流程 是 指导 购物 车 系统 程序 编写 
的 主要 依据 。 
4) 完善 的 会 员 中 心服 务 功能 ， 可 随时 查看 账目 明细 、 订 单 明 细 。 
5) 设计 会 员 价 商品 展示 ， 能 够 显示 企业 近期 所 促销 的 一 些 会 员 价 商品 。 
6) 人 性 化 的 会 员 与 网 站 留言 ， 可 以 方便 会 员 和 管理 者 的 沟通 。 
7) 后 台 管理 模块 ， 可 以 通过 使 用 本 地 数据 库 ， 保 证 购物 订单 安全 ， 并 及 时 有 效 地 处 
理 ， 便 于 管理 者 及 时 了 解 财务 和 销售 状况 。 


3. 电子 商务 网 站 运营 
一 个 成 功 的 电子 商务 网 站 ， 除 了 新 颖 的 产品 、 随 时 更 新 的 新 闻 、 良 好 的 售后 服务 等 之 
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外 ， 宣 传 与 推广 也 是 极其 重要 的 工作 。 如 何 规划 并 进行 有 效 的 网 络 营销 ， 这 几乎 成 了 中 小 企 
业 进 行 电子 商务 平台 运营 推广 的 难题 。 从 多 年 的 经 验 来 看 ， 造 成 中 小 企业 网 络 营销 不 能 正常 
运作 的 因素 ， 在 于 缺少 有 效 的 资讯 、 管 理 不 到 位 、 电 子 商 务 程 度 低 、 电 子 商 务 营 销 渠道 不 健 
全 等 。 电 子 商 务 造 就 了 一 批 网 络 营销 专家 ， 马 云 先生 当之无愧 可 以 成 为 这 个 专业 的 发 起 人 。 
网 络 营销 就 是 以 目标 客户 需求 为 出 发 点 ， 整 合 企业 各 方面 网 络 资源 进行 的 低 投入 、 精 准 化 网 
络 营销 活动 。 
回顾 成 功 的 实例 ， 凡 客 诚 品 便 是 一 个 很 经 典 的 电子 商务 网 络 营销 案例 。 其 在 2008 年 
的 市 场 营销 能 够 如 此 出 色 ， 离 不 开 与 龙 拓 互 动 的 精诚 合作 。 龙 拓 互 动 通过 网 络 营销 结合 
VANCL 新 品牌 上 市 ， 潜 心 构 建 了 一 套 适应 VANCL 发 展 阶段 的 以 ROI 为 核心 的 网 络 推广 
策略 ， 使 VANCL 迅速 在 B2C 同行 业 党 争 者 中 崛起 ， 并 通过 一 系列 卖点 明确 且 制 作 精 美 
的 互动 广告 ， 使 VANCL 在 产品 销售 和 品牌 形象 上 同步 提升 。 短 短 的 一 年 时 间 ， 龙 拓 互 动 
与 VANCL 并 肩 创 造 了 B2C 新 神话 ， 说 明 其 选择 媒介 的 首要 原则 符合 VANCL 的 整体 营销 
策略 ， 即 在 最 短 的 时 间 之 内 打开 市 场 并 恒利。 凡客诚 品 电子 商务 网 站 如 图 5 所 示 。 
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图 5 凡客诚 品 电子 商务 网 站 


上 面 所 说 的 案例 ， 说 明了 电子 商务 营销 不 是 简单 地 在 互联 网 上 建站 、 投 放 广 告 ， 而 是 
一 系列 有 计划 、 有 策略 、 有 预算 和 效果 分 析 的 营销 作业 。 企 业 网 络 营销 效果 不 是 以 单一 的 推 
广 产品 所 带 来 的 ， 而 是 通过 整合 企业 和 互联 网 信息 资源 ， 从 而 有 针对 性 地 开展 网 络 营销 推 
广 ， 以 达到 低 成 本 、 高 回报 的 商业 目的 。 从 案例 中 可 以 看 出 ， 如 果 龙 拓 互 动 对 电子 商务 营销 
没有 一 定 高 度 的 运作 和 良好 的 推广 方案 ， 那 么 其 整合 推广 的 VANCL 也 不 会 在 短 短 的 一 年 之 
内 创造 了 B2C 的 网 络 销售 神话 。 从 众多 的 成 功 案 例 中 可 以 看 出 ， 龙 拓 互 动 在 做 电子 商务 客 
户 营 销 方面 拥有 绝对 的 资源 、 技 术 、 创 意 等 实力 优势 ， 以 独特 的 一 面 进行 客户 管理 。 
传统 企业 要 实现 电子 商务 运营 ， 需 完成 三 大 核心 任务 : 

第 一 ， 电 子 商 务 网 站 建设 和 网 络 卖场 的 前 期 规划 。 
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第 二 ， 品 牌 推广 和 网 络 广 告 。 
第 三 ， 客 户 管理 和 销售 组 织 。 


上 述 三 大 核心 任务 是 企业 不 能 缺少 的 环节 。 所 以 要 想 成 功 ， 就 必须 大 力 宣传 自己 的 网 
站 。 网 站 的 运营 与 推广 ， 涉 及 很 多 的 知识 ， 包 括 网 站 经 营 的 策略 、 解 决 提高 浏览 量 的 方法 、 
使 用 关键 词 推广 网 站 、 网 络 广告 的 投放 、 搜 索引 擎 优化 等 。 本 书 将 单独 列 出 一 章 作为 重点 来 
讲解 这 个 网 站 拥有 者 最 关心 的 问题 。 


4. 本 书 服务 


在 本 书 的 光盘 中 附带 了 一 个 计算 机 相关 专业 论文 的 撰写 蓝本 ， 供 相关 专业 毕业 生 编 写 
论文 时 参考 ， 同 时 光盘 中 赠送 了 超 值 的 电子 商务 网 站 开发 的 全 部 源 代码 。 

本 书 将 理论 与 实践 相 结 合 ， 章 节 安 排 合 理 ， 注 重 实 用 性 与 可 操作 性 。 欢 迎 读者 加 入 QQ 
技术 服务 群 298191658 或 本 书 主要 作者 的 QQ 号 83560148， 共 同 探讨 电子 商务 网 站 的 制作 
之 道 。 

本 书 主要 由 王 志 晓 编写 (第 1 至 6 章 )， 参 与 本 书 第 7 至 10 章 编写 的 人 员 有 : 陈 益 
材 、 于 荷 云 、 官 斯 文 、 邹 亮 、 王 炎 光 、 耿 国 续 、 陈 益 红 、 秦 树 德 、 张 铭 运 、 赵 红 、 陈 章 、 于 
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电子 商务 网 站 的 建设 是 一 个 比较 复杂 而 且 庞 大 的 工程 ， 需 要 投资 者 进行 大 量 的 前 期 营 
销 理念 的 导入 和 专业 平台 搭建 的 前 期 策划 。 通 过 电子 商务 网 站 建设 前 期 的 策划 ， 可 以 明确 企 
业 网 站 建设 的 目的 及 功能 ， 确 定 企 业 网 站 的 定位 ， 并 根据 策划 的 方案 对 网 站 建设 中 的 选择 技 
术 、 制 作 内 容 、 投 入 费用 、 网 站 测试 及 网 站 维护 等 做 出 部 署 ， 这 对 企业 网 站 的 全 程 建设 起 着 
指导 与 蓝图 的 作用 。 

本 章 重 点 介绍 如 下 知识 : 
电子 商务 基础 知识 
前 期 策划 准备 工作 
网 站 域名 和 空间 
网 站 的 整体 规划 
它 电 子 商 务 网 站 鉴赏 


14 | 电子 商务 基础 知识 


企业 在 互联 网 上 搭建 网 站 平台 的 最 终 目标 就 是 要 实现 电子 商务 功能 。 其 内 容 包含 两 个 
方面 ， 一 是 电子 展示 方式 ;二 是 商贸 活动 。 在 制作 专业 的 电子 商务 网 站 之 前 ， 首 先 一 起 来 了 
解 电子 商务 的 基本 概念 和 特点 。 


111 火暴 的 电子 商务 市 场 


2012 年 12 月 中 国 互联 网 络 信息 中 心 CCNNIC) 发 布 的 《中 国 互联 网 络 发 展 状况 统计 报 
告 》 中 给 出 了 中 国 网 民 规 模 和 互联 网 普及 率 、 中 国手 机 网 民 规模 及 其 占 网 民 比 例 的 两 组 统计 
数据 ， 如 图 1-1 和 图 1-2 所 示 。 
RZ 2012 年 6 月 底 ， 中 国 网 民 规 模 达 到 5.38 亿 ， 超 过 美国 成 为 全 球 第 一 。 历 年 来 的 数 
据 统 计 (图 1-3) 更 显示 出 了 中 国信 息 化 的 高 速 发 展 。 

所 有 的 数据 证 实 了 盖 次 的 论断 : 21 世纪 的 商务 将 是 基于 信息 化 的 电子 商务 。 

很 多 商家 正 是 看 到 了 这 种 无 店铺 销售 的 商业 价值 和 潜在 的 市 场 ， 纷 纷 将 其 应 用 于 互联 
网 上 ， 将 自己 的 核心 产品 搬 上 了 互联 网 ， 并 在 网 上 销售 自己 的 产品 ， 建 立 网 上 的 购物 系统 ， 
于 是 逐步 形成 了 选择 商店 、 订 货 、 付 款 等 一 系列 通过 电子 方式 完成 的 购物 过 程 ， 轻 易 地 实现 
了 低 成 本 扩张 。 这 种 购物 方式 的 出 现 ， 不 仅 可 减轻 消费 者 的 购物 负担 ， 同 时 也 符合 商家 的 低 
成 本 要 求 。 可 以 说 电子 商务 的 产生 是 流通 业 的 一 场 新 革命 。 它 影响 着 人 们 的 生活 ， 冲 击 着 传 
统 的 消费 模式 ， 也 改变 着 零售 商 的 角色 。 电 子 购物 对 电子 商务 的 发 展 具有 深远 的 影响 ， 并 且 
已 经 成 为 发 展 最 快 的 一 个 新 兴 行 业 。 
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最 完整 的 也 是 最 高 级 的 电子 商务 应 该 是 能 够 利用 Internet 进行 全 部 的 贸易 活动 ， 即 在 
网 上 完整 地 实现 信息 流 、 商 流 、 资 金 流 和 部 分 物流 。 也 就 是 说 ， 可 以 从 寻找 客户 开始 ， 一 
直到 洽谈 、 订 货 、 在 线 付 《〈 收 ) 款 、 开 据 电子 发 票 以 至 到 电子 报关 、 电 子 纳税 等 通过 
Internet 一 气 呵 成 。 要 实现 完整 的 电子 商务 还 会 涉及 很 多 方面 ， 除 了 买 家 、 卖 家 外 ， 还 要 
有 银行 或 金融 机 构 、 政 府 机 构 、 认 证 机 构 、 配 送 中 心 等 机 构 的 加 入 才 行 。 由 于 参与 电子 商 
务 中 的 各 方 在 物理 上 是 互 不 谋面 的 ， 因 此 整个 电子 商务 过 程 并 不 是 物理 世界 商务 活动 的 翻 
版 ， 网 上 银行 、 在 线 电 子 文 付 等 条 件 和 数据 加 外 子 签名 等 技术 在 电子 商务 中 发 挥 着 重 
要 的 不 可 或 缺 的 作用 。 

电子 商务 最 重要 的 是 “商务 ”， 而 网 站 只 不 过 是 电子 商务 的 后 台 文 撑 。 男 一 方面 ， 网 上 
购物 完全 取代 了 电子 商务 的 概念 。 事 实 上 ， 它 仅仅 是 电子 商务 的 一 小 部 分 ， 而 完整 的 电子 商 
务 过 程 则 是 一 切 利用 现代 信息 技术 的 商业 活动 的 电子 化 过 程 。 

对 于 任何 企业 而 言 ， 产 品 的 销售 是 企业 发 展 最 重要 的 问题 ， 也 是 生存 之 本 。 传 统 的 销 
售 模式 存在 很 多 的 弊端 ， 尤 其 是 在 客户 开发 方面 ， 不 管 结果 会 如 何 ， 前 期 就 需要 投入 大 量 的 
资金 去 推广 市 场 ， 在 这 种 状况 下 ， 想 要 改变 其 现状 却 又 不 知道 从 何 做 起 。 
面 对 如 此 巨大 的 网 络 销售 市 场 ， 企 业 尝 试 着 开展 信息 化 的 建设 ， 并 从 一 些 门 户 网 站 的 
横幅 广告 开始 。 在 不 经 意 间 发 现 咨询 的 电话 在 增加 ， 了 解 产 品 的 客户 也 在 增加 ， 而 且 客 户 的 
来 源 不 单单 是 本 地 客户 ， 全 国 各 地 的 企业 都 有 。 在 给 他 们 邮寄 资料 的 时 候 ， 感 觉 时 间 太 长 ， 
成 本 太 高 。 由 此 意识 到 网 站 是 最 好 的 宣传 载体 ， 方 便 快 捷 。 

如 果 想 进一步 从 互联 网 上 打开 企业 的 产品 销售 渠道 ， 企 业 就 要 考虑 在 互联 网 上 打造 自己 
的 电子 商务 网 站 ， 从 而 更 方便 信息 的 交流 以 及 产品 的 介绍 。 电 子 商 务 网 站 的 建设 ， 拓 宽 了 新 
客户 的 开发 范围 ， 对 于 企业 的 发 展 更 是 如 虎 添 加 。 在 网 站 上 加 上 有 效 的 、 有 针对 性 的 宣传 和 
推广 ， 可 使 企业 在 互联 网 上 的 名 声 得 到 提高 ， 订 单 会 不 断 增 加 ， 效 益 也 会 越 来 越 好 。 


11.2 电子 商务 的 概念 与 特点 


有 些 人 认为 ， 做 一 个 网 站 挂 到 互联 网 上 ， 输 入 指定 的 域名 能 打开 企业 网 站 就 是 进行 电 
子 商务 。 其 实 ， 这 是 一 个 很 大 的 误区 。 目 前 ， 大 部 分 企业 所 做 的 网 站 都 是 “名 片 式 ” 的 静态 
页 面 ， 只 是 起 到 广 而 告 之 的 作用 。 电 子 商 务 的 概念 在 不 同时 期 ， 中 外 学 者 、 专 家 从 不 同 的 角 
度 提 出 过 不 同 的 定义 。 在 20 世纪 80 年 代 ， 人 们 认为 它 就 等 于 EDI。 而 电子 商务 作为 一 个 完 
整 的 概念 出 现 ， 也 仅 是 在 近 几 年 ， 因 此 它 还 是 个 新 生 儿 ， 其 相关 技术 发 展 得 很 快 ， 其 模式 也 
在 不 断 地 摸索 之 中 。 即 使 是 现在 ， 人 们 对 电子 商务 仍然 没有 一 个 统一 的 定义 。 不 同 的 组 织 有 
不 同 的 看 法 ， 不 同 的 行业 也 有 不 同 的 说 法 。 

1997 年 11 月 6—7 日 ， 国 际 商会 在 法 国 首 都 巴黎 举行 了 世界 电子 商务 会 议 。 该 会 议 从 
商业 角度 给 出 了 电子 商务 的 概念 : 电子 商务 是 指 实现 整个 贸易 活动 的 电子 化 。 从 涵盖 范围 方 
面 可 以 定义 为 : 交易 各 方 以 电子 交易 方式 而 不 是 通过 当 一 ----- 一 ------- 汪汪 全 ~ 


ER 


pa 


面 交换 或 直接 面谈 方式 进行 的 任何 形式 的 商业 交易 ; 从 | 售 | E ME 
技术 方面 可 以 定义 为 : 电子 商务 是 一 种 多 技术 的 集合 | E l m | Y | 
体 ， 包 括 交换 数据 〈 如 电子 数据 交换 、 电 子 邮件 )、 获 得 Y ü i ; 
数据 〈 如 共享 数据 库 、 电 子 公告 牌 ) 以 及 自动 捕获 数据 7700000000007 
(如 条 形 码 ) 等 ， 如 图 1-4 所 示 。 图 1-4 电子 商务 概念 示意 图 
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电子 商务 发 展 到 今天 ， 迫 切 需要 给 出 一 个 既 完 整 又 简洁 的 定义 。 纤 合 各 方面 不 同 的 看 
法 ， 结 合 我 国电 子 商 务 的 实践 ， 电 子 商务 的 概念 可 以 作 如 下 定义 : 


电子 商务 是 指 交 易 者 或 参与 者 通过 信息 技术 和 网 络 技 术 ( 主 


信息 技术 所 进行 的 各 类 商务 活动 ， 内 容 包 括 货 物 贸易 、 服 


域 。 这 里 的 “通过 信息 技术 和 计算 机 网 络 ” 和 “进行 的 各 类 商务 活动 ”都 具有 丰富 的 


EJ 
务 贸 


要 是 互联 网 ) 等 现代 


易 和 知识 产权 贸易 等 领 


含义 。 归 纳 起 来 ， 迄 今 为 止 ， 人 们 所 谈 及 的 电子 商务 ， 是 指 在 全 球 各 地 广泛 的 商业 贸 
易 活动 中 ， 通 过 现代 信息 技术 ， 特 别 是 信息 化 网 络 ， 所 进行 并 完成 的 各 种 商务 活动 、 


交易 活动 、 金 融 活动 和 相关 的 综合 服务 活动 。 这 种 1 


在 的 不 长 时 间 内 ， 正 妊 


容 和 形式 。 


电子 商务 作为 一 利 
(1) 交易 环节 少 、 
的 诱 人 之 处 束 在 于 它 能 有 效 地 减少 交易 环节 ， 大 幅度 
而 降低 消费 者 所 得 到 的 商品 的 最 终 价 格 。 传 统 商 业 模 式 中 ， 企 业 和 商 


电子 商务 


营销 成 本 低 


一 部 分 资金 用 
的 最 终 价 格 。 
统 商 业 模 式 ! 


既 可 主动 散发 ， 又 可 以 随时 接受 需求 者 的 查询 ，f 


于 开拓 分 销 渠道 ， 让 出 
网 上 销售 则 打破 了 这 一 
的 中 间 商 ， 从 而 使 销售 价 


很 大 一 部 分 利 
局 限 性 ， 它 使 得 三 家 和 消费 者 直接 联系 ， 绕 过 了 传 
格 更 加 合理 化 。 所 有 信息 化 的 商品 在 网 上 发 布 ， 
1 不 需要 负担 促销 广告 费 ， 而 且 在 网 上 


和 行业 模式 ， 具 有 如 下 特点 : 


润 给 分 销 商 


包子 商务 活动 从 其 产生 之 时 起 到 现 
E 显 著 地 改变 着 人 们 长 期 以 来 习以为常 的 各 种 传统 贸易 活动 的 内 


地 降低 交易 成 本 ， 从 
家 不 得 不 拿 出 很 大 


， 用 户 也 不 得 不 承担 高 昂 


散发 的 信息 面 
到 全 世界 。 同 


;于 化 
Ji o 


三， 不 仅仅 只 是 针对 某 一 地 区 或 国 


时 ， 它 又 可 以 很 好 地 实现 


(2) 不 受 场地 区 域 的 限制 


利用 网 络 ， 将 营业 窗口 网 络 化 、 无 形 化 ， 无 须 投 入 巨 资 在 各 地 设立 营业 窗口 ， 


用 户 通过 上 网 就 可 以 进入 商家 的 窗 
“店铺 ”中 摆 放 多 少 商 品 几 乎 不 受 任何 限制 ， 无 论 商 
经 营 方式 灵活 ， 可 以 方便 地 在 全 世界 范 


“ 零 库存 ”生产 ， 调 节 什 么 时 候 卖 货 ， 


， 没 有 或 只 


家 发 出 ， 它 可 以 快速 地 将 商品 信息 散播 


了 很 低 的 店面 租金 


什么 时 候 


e 
每 一 个 


全 成本。 电子 商场 的 经 营 在 


(3) 简单 的 电子 化 文 付 手段 


随 着 SET 标准 的 推出 ， 各 
上 购物 后 的 货款 支付 办 法 ， 如 使 


有 内 采购 、 销 售 


信用卡、 


ETILE 


者 可 用 它 方便 地 购物 和 从 事 其 他 交易 活动 。 
(4) 客户 信息 易于 管理 


在 收 到 客户 订单 后 ， 服 务 器 可 自动 汇集 客户 信息 
进行 分 机 ， 寻 找 突破 口 ， 引 导 新 商品 的 生产 、 销 售 和 消费 。 
(5) 方便 信息 类 商品 的 销售 
对 于 计算 机 软件 、: 


家 有 多 大 的 
各 利 


商品 经 营 能 力 均 可 满足 ， 


且 


Fh 商 品 。 


智能 


民 行 或 金融 机 构 、 信 用 卡 发 放 者 和 软件 三 商 纷纷 提出 了 在 网 
KE、 储 蓄 卡 等 ， 电 子 货币 的 持 有 


电子 报刊 、 


可 先 在 网 上 付款 ， 然 后 在 网 上 下 载 所 购物 品 。 
(6) 符合 全 球 经 济 发 展 要求 


电子 商务 与 生 具 来 的 “全 球 性 ”特征 使 得 各 发 达 国 
的 广泛 ， 使 得 网 上 交易 将 打破 原 有 国 


心 


是 数据库 


家 对 其 十 分 重视 ， 网 络 的 跨 


P， 可 对 收 到 的 订单 和 意见 


图 书 等 电子 信息 商品 来 说 ， 电 子 商务 是 最 佳 选择 ， 用 户 


国界 及 


界 的 贸易 壁垒 ， 谁 主导 了 电子 商务 ， 谁 就 能 在 这 个 
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大 商务 环境 中 具有 霸权 。 各 发 达 国家 在 信息 化 发 展 方面 已 领先 于 我 国 ， 而 电子 商务 ， 则 是 我 
国 赶 超 世 界 的 一 次 绝 好 的 机 会 ， 是 百年 不 遇 的 良机 。 我 们 应 抓 住 机 遇 ， 使 我 国企 业 在 世界 上 
建立 起 真正 的 高 大 形象 和 实力 ， 为 世界 做 出 贡献 。 
11.3. 电子 商务 网 站 的 目的 

建 电子 商务 网 站 不 是 为 了 赶 一 时 的 潮流 或 是 博取 一 个 好 听 的 名 声 。 一 个 企业 建立 网 站 


的 最 终 目 的 和 它 的 经 营 目 的 应 该 是 一 致 的 ， 就 是 通过 企业 网 站 来 降低 企业 的 管理 成 本 和 交易 
成 本 以 及 通过 开展 电子 商务 活动 来 获得 更 多 的 利润 。 只 有 把 网 络 技术 同 企业 管理 体系 、 工 作 
流程 和 商务 动作 实现 紧密 的 集成 ， 才 能 真正 发 挥 企业 网 站 的 作用 。 明 确 了 这 一 目标 ， 才 能 正 
确 地 经 营 这 个 电子 商务 网 站 ， 并 使 其 为 企业 服务 。 

总 而 言 之 ， 开 办 电子 商务 网 站 的 目的 主要 有 如 下 几 点 : 


(1) 提升 企业 形象 

一 般 说 来 ， 企 业 建立 自己 的 网 站 ， 不 大 可 能 马上 为 企业 带 来 新 客户 、 新 生意 ， 也 不 
大 可 能 大 幅度 地 提高 企业 业绩 。 毕 竟 ， 企 业 用 于 网 站 的 费用 很 低 ， 期 望 极 低 的 费用 能 马 
上 为 企业 带 来 巨大 的 收益 是 不 现实 的 。 企 业 网 站 的 作用 更 类 似 于 企业 在 报纸 和 电视 上 所 
做 的 宣传 企业 本 喘 及 品牌 的 广告 。 不 同 之 处 在 于 企业 网 站 容量 更 大 ， 企 业 可 以 把 任何 想 
让 客户 及 公众 知道 的 内 容 放 入 网 站 。 此 外 ， 相 对 来 说 ， 建 立 企业 网 站 的 投入 比 其 他 广告 


方式 要 低 得 多 。 当 然 ， 网 站 和 广告 是 两 种 不 同 的 宣 


间 更 多 的 应 i 


该 网 站 ， 并 把 具体 的 内 容 放 入 网 站 。 


玄 是 互相 补充 ， 而 不 是 相互 排斥 。 企 业 如 拥 


ES 


际 互联 网 是 一 个 不 受 时 


接 、 


它 是 目前 最 直 
方便 。 
(2) 全 面 详细 


企业 网 站 的 一 
上 ， 企 业 可 以 把 任何 想 让 人 们 知道 的 信息 放 入 网 站 。 例 如 ， 企 业 简 介 ， 企 业 的 人 员 、 广 


E, 
H 4 


地 介绍 企业 和 产品 


个 最 基本 的 功能 ， 就 


'Er^ Wü. f 
4E Ny d Y; 
法 让 更 多 的 人 知道 


5 是 网 上 办 公 室 或 网 


是 能 


网 站 ， 应 在 网 络 
"T 


T 


Ka EA 


够 全 面 、 详 细 


地 介绍 企业 及 企业 产品 。 


究 机 构 ， 产 品 外 观 、 功 能 及 使 用 方法 等 ， 都 可 以 展示 于 网 上 
上 交易 中 心 ， 是 企业 经 营 最 方便 的 场所 或 窗口 。 


^ 


您 的 网 上 办 公 室 或 交易 


Hd 


心 ， 就 将 给 您 


经 营 效率 大 大 提高 
G) 及 时 得 到 


客户 一 般 是 不 会 积极 主动 


, 


ji 
忌 


客户 反馈 的 信 ， 


日 然 会 启 得 更 多 的 利 } 


EH (^ TH. 


B. 


户 与 企业 联系 的 


电子 邮件 和 电子 表格 ， 


因 使 用 极其 方便 


p 


这 种 方式 与 企业 进 


联系 )， 企业 可 以 得 


EDRI o 


f 


(4) 可 以 与 客户 保持 密切 联系 


由 


于 互联 网 这 种 高 科技 的 媒介 进入 中 
不 习惯 于 这 种 联系 方式 。 但 随 着 越 来 越 多 的 企业 对 互联 网 认识 的 加 深 ， 在 网 | 


HH 


更 多 的 客户 或 供应 商 。 


传 方式 ， 各 有 其 不 同 的 作用 ， 它 们 之 
有 自己 的 


E 介 


由 的 信息 交换 系统 ， 
FE 富 和 最 快捷 的 联系 方式 ， 信 息 沟通 的 高 效率 为 企业 带 来 了 最 大 的 


也 向 企业 反馈 信息 的 。 如 果 企 业 在 设计 网 站 时 ， 加 入 客 
《一 般 来 说 ， 客 户 习 惯 于 使 月 


H 


到 大 量 的 客户 意见 和 建议 。 这 将 有 利于 企业 的 


国 的 时 间 不 长 ， 


国企 业 与 客户 之 间 现在 暂时 还 


息 这 种 现 况 将 发 生 


渐 习 惯 于 利用 网 络 与 客户 进行 沟通 。 互 联网 作为 唯一 一 利 


巨大 改变 。 目 前 ， 已 经 有 越 来 越 多 的 中 国企 业 
和 全天候 24 小 时 不 间断 的 媒体 平台 


有 自己 的 网 络 能 


发 布 产品 和 信 
， 并 逐 


5 


在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


是 传统 媒体 可 望 而 不 可 及 的 。 作 为 一 个 企业 ， 在 互联 网 上 建立 
己 的 企业 风采 ， 让 更 多 人 了 解 自己 的 企业 ， 使 企业 能 够 在 公众 知名 


用 就 是 可 以 向 世界 展示 


己 的 网 站 ， 最 显而易见 的 作 


c 


A- 


度 上 有 一 定 的 提升 。 


(5) 与 潜在 客户 建立 商业 联系 


RETN 


网 站 最 重要 的 功能 之 一 ， 也 是 为 什么 那么 多 国 


外 企业 非常 重视 网 站 建设 的 林 


国 的 


本 原因 。 现 在 ， 世 界 各 


经 销 商 主要 是 利 月 


样 做 费用 最 低 、 效 率 最 高 。 
企业 的 产品 和 服务 。 因 此 ， 
用 的 方法 是 将 企 
在 客户 能 够 容易 


也 找到 企业 


的 网 站 登 


原则 上 ， 全 世 
关键 在 于 如 
记 在 
MEY 


H 


Z 


分 有 效 的 。 
(60 使 企业 


件 地 址 当成 网 址 ， 
一 。 互 联网 真正 
力 的 标志 是 企业 


JS AE AEN dH | Hae 


并 印 在 名 


LA MER THX 
在 中 国 ， 人 们 对 互联 网 往往 有 所 误解 ， 以 为 1 
bk. mu 
富 性 ， 几 乎 无 所 不 有 。 对 企业 来 说 ， 有 具有 
站 ， 而 非 电子 信箱 。 


的 内 涵 在 于 其 内 
的 独立 


能 力 


rz 


实 
SE 


F 


目前 ， 越 来 越 多 的 企 \ 


V 运 


可 将 企业 网 站 


日 互联 网 来 寻找 新 的 产品 和 新 的 供求 ， 因 


界 任何 人 ， 只 要 知 


为 这 
了 企业 的 网 站 ， 就 可 以 看 到 


uS 


道 


E 介 出 去 。 


种 非常 实用 、 有 效 且 常 


国内 知名 的 搜索 引 劳 上 如 百度 、 新 浪 、 搜 狐 等 ;， 使 潜 
上 的 产品 。 这 正 是 商业 -| 


通行 的 做 法 ， 而 上 且 


| CUR UI 


E 明 是 十 


er 


H 
[1 


AN 


J 


a 


际 互 联网 这 种 高 效率 的 信 


箱 就 是 互联 网 ， 有 的 企业 将 电子 邮 
是 互联 网 最 常用 、 最 简单 的 功能 之 
网 络 沟通 能 


息 沟 通 工 具 与 供应 商 或 客户 建 


立 关 系 ， 以 最 快 的 速度 相互 沟通 ， 从 而 提高 企业 在 市 场 中 的 竞争 力 。 

C7) 可 以 降低 通信 费用 

对 于 企业 来 说 ， 每 年 的 通信 费用 ， 尤 其 是 涉及 进出 口 贸 易 的 通信 费用 ， 是 一 笔 非常 庞 
大 的 开支 。 利 用 企业 网 站 所 提供 的 集团 电子 信箱 可 以 有 效 地 降低 通信 费用 ， 这 是 企业 建立 网 
站 的 男 一 个 益处 。 

(8) 网 络 化 的 业务 、 用 户 管理 

在 一 个 有 相对 规模 的 企业 中 ， 信 息 流 、 物 流 、 资 金 流 的 管理 应 该 有 一 个 比较 规范 和 科 
学 的 流程 。 而 网 络 的 出 现 ， 恰 恰 满足 了 这 种 业务 管理 自动 化 的 需要 ， 使 企业 的 内 部 新 闻 通 
告 、 订 货 管 理 、 客 户 管理 、 采 购 管 理 、 员 工 管理 等 许多 繁杂 的 工作 都 可 以 在 互联 网 和 局 域 网 
上 很 轻松 地 完成 ， 从 而 大 大 提高 工作 效率 。 

(9) 开展 电子 商务 

直接 利用 互联 网 开展 电子 商务 ， 是 企业 上 网 的 理想 目标 。 目 前 ， 一 些 大 型 公司 已 实现 
了 这 一 目标 ， 并 已 经 党 到 了 电子 商务 所 带 来 的 巨大 好 处 : 内 部 信息 数据 的 瞬间 沟通 、 人 员 联 
系 的 日 趋 紧 密 、 业 务 开展 效率 加 快 、 国 际 化 成 分 的 日 益 增 加 、 大 量 门 面 与 分 支 机 构 的 消减 所 
带 来 的 资金 节约 等 。 

一 个 完整 的 电子 商务 网 站 要 具备 如 下 功能 : 


(1) 产品 展示 功能 


产品 展示 功能 即 可 以 在 后 台 按 分 类 和 索引 目录 自主 上 传 所 要 销售 的 产品 
开发 的 时 候 通常 包括 一 级 目录 和 二 级 子 目 录 。 子 目录 有 
产品 供应 商会 有 成 和 干 上 万 种 被 分 类 的 产品 ， 这 样 的 公 


展示 是 很 重要 的 。 


Z] 


He EER 


时 在 组 织 上 4 


民 方 便 。 例 如 ， 一 个 工业 


dj 


EXE YI 


E 子 商务 网 站 时 ， 对 产品 分 类 


HH 2J KR 


功能 可 以 包括 关键 字 查 询 、 分 类 查询 、 组 合 查询 等 。 通 过 搜索 引擎 的 查询 功能 ， 


便 、 


算 。 


(2) 产品 的 搜索 
网 站 可 以 利用 数 


引擎 
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据 库 和 信息 检索 技术 为 用 户 提 供 对 产品 及 其 他 信息 的 查询 功能 。 查 询 


快捷 地 在 网 站 上 找到 所 需要 的 产品 及 服务 方面 的 信息 。 


(3) 网 上 订购 功能 


» 


> 


Ke 


能 


上 订购 功能 是 指 为 浏览 网 站 的 消费 者 提供 包括 网 上 采购 及 填写 订购 单 等 功能 。 
(4) 网 上 结算 功 


网 上 结算 功能 是 


指 通 过 后 台 程序 自动 统计 结算 ， 


只 有 实现 了 网 上 


(5) 网 络 售后 服务 


在 进行 电子 商务 活动 的 过 程 


结算 ， 才 标 ; 


志 着 真正 意义 上 的 电子 商务 活动 的 完成 。 


j 户 可 以 方 


并 实现 用 户 、 商 家 与 银行 之 间 的 结 


P， 实 现 网 络 售后 服务 的 功能 是 很 重要 的 。 利 用 人 工 智 能 


中 的 机 器 学 习 、 知 识 表达 ， 使 得 网 站 能 自动 地 回答 用 户 提 出 的 各 种 问题 ， 包 括 一 般 性 服务 和 
销售 查询 问题 ， 还 能 


在 网 站 搭建 的 时 
略 等 。 如 果 说 你 的 网 
个 营销 型 的 网 站 。 网 
分 考虑 最 终端 市 场 的 需求 ， 把 所 要 采用 的 营销 手段 充分 融入 到 搭建 的 平台 上 ， 这 才 是 了 
做 法 。 
总 之 ， 企 业 创办 电子 商务 网 站 是 企业 经 营 的 需要 ， 是 一 利 


普遍 的 应 用 。 


(6) 营销 功能 


1 
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这 一 点 非常 的 重要 ， 互 联网 平台 在 推广 的 时 候 往往 是 和 技术 相 结合 的 ， 如 SEO 营销 ， 


恬 就 要 充分 考虑 进去 ， 包 括 关键 词 的 选择 、 关 键 词 在 网 页 上 的 分 布 及 链接 策 


站 只 是 企业 随便 搭建 的 一 个 平台 ， 那 么 这 只 是 电子 化 的 画册， 并 不 是 一 


络 营 和 


省 是 全 程 整合 营销 的 过 程 ， 从 你 开始 有 运营 项 目 想 法 的 时 候 就 要 充 
Ef 


的 


战略 投资 ， 而 不 是 摆设 。 它 


能 使 企业 以 最 小 的 投入 换取 最 大 的 回报 ， 给 企业 真正 带 来 效益 。 构 造 最 适合 自己 特点 的 上 网 
计划 和 模式 是 最 明智 的 选择 。 


12 | 前 期 策划 准备 工作 


一 个 企业 建设 网 站 的 目的 就 是 通过 网 络 宣传 企业 的 形象 、 推 广 企 业 业 务 ， 或 者 向 网 站 
的 访问 者 展示 和 销售 产品 。 那 么 ， 前 期 应 该 进行 哪些 策划 准备 工作 呢 ? 本 小 节 将 介绍 企业 网 


站 建设 前 期 的 准备 工 


作 。 


121 全 程 开 发 流程 


企业 网 站 首先 需要 明确 网 站 的 建设 目的 、 访 问 用 户 定位 、 实 现 的 功能 、 发 布 时 间 、 成 
本 预算 、 网 站 CI 风格 等 。 企 业 网 站 是 展现 企业 形象 、 介 绍 产品 和 服务 、 体 现 企业 发 展 战略 


的 重要 途径 之 一 ， 因 


施 方案 。 


电子 商务 网 站 的 


发 流程 如 


图 1-5 所 示 。 


此 必须 从 总 体 上 对 网 站 进行 一 定 的 规划 和 设计 ， 从 而 做 出 切实 可 行 的 实 
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定位 网 店 的 建设 主题 


„a | 拟定 网 店 访问 群体 
结构 策划 L-. | 设计 网 店 结构 图 
规划 网 店 文件 及 目录 
i 租用 服务 空间 
Loos, | 设计 网 页 的 UI 效果 
设计 准备 工作 | 上 - ”| 设计 网 页 内 容 
细 化 网 站 的 结构 
Į 设计 网 店 文件 夹 


- 设置 本 地 站 点 
设计 实现 设置 服务 器 端 站 点 
程序 的 开发 与 设计 


U 网 店 的 上 传 
Loos, | 服务 器 的 安全 性 
维护 与 推广 | 上 - ”| 网 店 的 推广 
网 店 的 数据 内 容 更 新 


图 1-5 电子 商务 网 站 的 开发 流程 


1.2.2 ”选择 开发 方式 


在 创建 电子 商务 网 站 之 时 ， 通 常 要 先 考虑 以 下 一 些 问 题 : 

1) 建设 此 网 站 的 目的 是 什么 ? 

2) 为 哪些 人 群 提供 服务 和 产品 ? 

3) 网 站 能 提供 什么 样 的 产品 和 服务 ? 

4) 网 站 的 目的 消费 者 和 受众 的 特点 是 什么 ? 

5) 网 站 产品 和 服务 适合 什么 样 的 表现 方式 ? 

6) 网 站 需要 制作 成 动态 的 还 是 单纯 静态 的 ? 

7) 申请 一 个 合适 的 域名 。 

8) 网 站 的 空间 是 租赁 还 是 购买 服务 器 ? 

目前 开发 网 站 的 方式 主要 有 三 种 ， 即 企业 自行 开发 网 站 、 委 托 网 站 设计 公司 开发 和 租 
用 网 上 商城 的 专卖 店 。 

那么 ， 选 择 什 么 样 的 方式 实现 自己 的 网 站 最 合适 呢 ? 

这 要 根据 企业 的 实际 情况 来 决定 。 下 面 列 出 了 这 3 种 网 站 开发 方式 的 特点 : 

1) 企业 自行 开发 网 站 的 方式 最 灵活 ， 能 够 完全 地 按照 企业 自身 的 要 求 来 实现 功能 和 效 
果 ， 网 站 的 更 新 与 维护 也 很 方便 。 

2) 委托 网 站 设计 公司 开发 网 站 的 优点 是 开发 周期 得， 效果 好 ， 但 是 费用 依据 功能 和 页 
面 的 数量 而 定 ， 会 比 自行 开发 的 成 本 高 。 

3) 租用 网 上 商城 的 专卖 店 是 最 快捷 的 ， 较 少 需要 开发 周期 ,但 是 页 面 风格 和 功能 比较 单 
一 ， 不 够 灵活 ， 很 难 充 分 传达 出 企业 自身 的 特点 。 而 且 网 上 商城 经 营 的 优 劣 在 很 大 程度 上 决定 了 
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企业 网 站 的 成 败 ， 一 旦 网 上 商城 倒闭 ， 企 业 网 站 也 很 可 能 随 之 关闭 ， 风 险 较 大 ， 因 此 选择 时 一 定 
要 考察 该 商城 的 实力 和 信誉 。 网 上 商城 与 传统 的 商城 一 样 ， 商 城 本 号 积 聚 的 人 气 可 以 为 网 上 商店 
带 来 大 量 的 浏览 量 。 因 此 ， 人 和 气 旺 盛 并 且 与 自己 的 顾客 群 定位 一 致 的 商城 是 最 佳 的 选择 。 此 外 ， 
有 的 网 上 商城 能 够 提供 在 线 支付 或 货物 配送 服务 ， 能 够 解决 商品 网 上 销售 中 的 一 些 问 题 。 


1.2.3 ”网 站 主题 定位 


确定 网 站 的 主题 名 称 ， 尽 量 使 其 好 听 、 好 记 、 有 意义 ， 还 要 有 有 新意。 同样， 网 站 的 名 
称 会 关系 到 浏览 者 是 否 很 容易 地 接受 用 户 的 网 页 ， 所 以 要 注意 如 下 两 点 : 

1) 网 站 名 称 要 明确 用 户 的 网 站 内 容 。 针 对 企业 网 站 建设 而 言 ， 都 可 以 用 公司 自己 的 名 
称 或 者 是 销售 的 产品 来 定位 主题 。 如 “中 国 大 学 生 交 友 网 ”“ 中 国 公务 员 培训 网 ”“Jadewen 
婚纱 网 ”等 。 

2) 网 站 名 称 要 易 记 ， 不 要 太 掏 口 、 生 个 。 不 管 要 建设 的 是 一 个 单纯 传播 信息 的 公益 网 
站 还 是 商务 网 站 ， 只 有 在 明确 了 网 站 的 主题 之 后 ， 才 能 正确 地 进行 后 续 工作 的 分 析 与 实施 。 


1.2.4 目标 浏览 对 象 


在 定位 好 网 站 的 主题 后 ， 网 站 的 服务 对 象 是 谁 呢 ? 哪 些 人 会 有 兴趣 先 来 浏览 将 要 建设 
的 网 站 ? 划 定 网 站 浏览 者 群体 的 重要 性 便 立 即 体现 出 来 。 因 为 只 有 确认 好 观众 的 需要 ， 才 能 
正确 地 分 析 各 种 有 效 的 信息 ， 把 握 网 站 的 传播 要 点 与 经 营 理念 ， 吸 引 更 多 的 顾客 ， 达 到 网 站 
建设 的 目标 。 

下 面 以 迪士尼 网 站 为 例 来 说 明 网 站 建设 时 拟定 网 站 访问 对 象 的 重要 性 。 

迪士尼 网 站 的 首页 如 图 1-6 所 示 。 该 网 站 主要 的 浏览 者 是 儿童 ， 因 此 从 内 容 结构 到 颜 
色 的 设计 都 是 从 儿童 的 喜好 出 发 ， 制 作 的 网 站 很 有 趣味 性 ， 能 让 访问 的 孩子 一 下 子 就 喜欢 上 
这 个 网 站 。 


J 迪士尼 中 国 言 网 首页 - microroft Internet Expl 


Pm kerz e 后 -及 回回 


wvv. dol. ca iadex. shtnl 


图 1-6 迪士尼 网 站 
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该 网 站 在 电子 商务 的 产品 展示 上 也 下 足 了 功夫 ， 其 产品 展示 效果 如 图 1-7 所 示 。 该 网 
站 不 像 其 他 的 电子 商务 平台 那么 复杂 ， 尽 量 将 最 终 的 产品 都 以 大 图 的 形式 展现 给 孩子 ， 充 分 
考虑 到 儿童 注意 力 有 限 的 特点 。 


四 受 心 美食 | 亲子 首页 | 连 士 尼 言 方 网 站 - icrosof 
xo) c) EFV KEW IAT) WHO 
om: O- DAO Pss zr 0 e aea 


HRED) [&) nttp://baby. dol. c fosa 


"ES 
ensy ^? EXIB e 


进士 尼 首 页 RF 


图 1-7 产品 展示 效果 


1.3 | 网 站 域名 和 空间 


网 站 要 有 一 个 自己 的 网 站 地 址 ， 简 称 网 址 。 网 址 是 由 域名 来 决定 的 。 因 此 ， 若 想 建 
立 网 站 ， 首 先 需 要 注册 或 转 入 一 个 域名 。 域 名 是 Intemet 上 的 一 个 服务 器 或 一 个 网 络 系 
统 的 名 字 。 域 名 是 独一无二 的 ， 而 且 一 般 都 采取 先 注册 先 得 到 的 申请 方法 。 注 册 域 名 之 
后 ， 还 需要 一 个 放置 网 站 程序 的 网 站 空间 ， 一 般 采 取 购 买 虚拟 主机 或 购买 服务 器 并 托管 
的 方式 。 


1.3.1 网 站 的 四 地 址 


在 Intenet 上 有 成 千 上 万 人 台 主 机 同时 在 线 ， 为 了 区 分 这 些 主机 ， 给 每 台 主 机 都 分 配 了 一 
个 专门 的 地 址 ， 称 为 PP 地 址 。 通 过 IP 地 址 就 可 以 访问 到 每 一 台 主 机 。 卫 地 址 由 4 部 分 数字 
组 成 ， 每 部 分 都 不 大 于 256， 各 部 分 之 间 用 小 数 点 分 开 。 例 如 www.sina.com， 就 是 IP 地 址 
为 220.113.15.16 的 域名 。 在 DOS 操作 系统 下 用 ping www.sina.com 就 可 以 知道 该 域名 的 TP 
地 址 ， 如 图 1-8 所 示 。 
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图 1-8 ping 域名 所 指向 的 IP 地 址 


1.3.2 ”注册 域名 商标 


网 站 需要 有 自己 独立 的 域名 ， 因 此 首先 
好 听 、 好 记 、 有 意义 ， 还 要 有 新 意 。 网 页 的 名 
所 以 要 注意 如 下 几 点 ; 

1) 网 站 名 称 应 该 准确 、 明 了 地 表达 网 页 的 内 容 。 

2) 网 站 名 称 不 能 落 入 俗套 ， 要 让 别人 深刻 地 记 住 你 的 网 站 。 

3) 网 站 名 称 要 易 记 ， 不 要 太 扫 口 、 生 个 。 

从 技术 上 讲 ， 网 站 各 称 需要 有 一 个 专 有 的 域名 用 来 访问 。 域名 只 是 Internet 中 用 于 解决 
地 址 对 应 问题 的 一 种 方法 ， 相 当 于 Internet 上 的 IP 地 址 。 可 以 通过 IP 地 址 来 访问 每 一 台 主 
机 ， 但 是 要 记 住 那么 多 枯燥 的 数字 串 显 然 是 非常 困难 的 ， 为 此 Internet 提供 了 域名 (Domain 
Name)。 一 个 完整 的 域名 由 两 个 或 两 个 以 上 部 分 组 成 ， 各 部 分 之 间 用 英文 的 句号 “.” 来 分 
阿 ， 例 如 “新 浪 网 ”主机 的 域名 是 “www.sina.com.cn”。 显 然 ， 域 名 比 IP 地 址 好 记 多 了 。 
域名 前 加 上 传输 协议 信息 及 主机 类 型 信息 就 构成 了 网 址 (URL)， 例 如 “百度 搜索 引擎 ”主机 
的 URL 是 “http://www.baidu.com”。 
域名 是 Internet 上 的 一 个 服务 器 或 一 个 网 络 系统 的 名 字 。 在 全 世界 ， 没 有 重复 的 域名 。 
从 社会 科学 的 角度 看 ， 域 名 已 成 为 了 Internet 文化 的 组 成 部 分 。 从 商业 角度 看 ， 域 名 已 被 誉 
为 “企业 的 网 上 商标 ” 


要 给 独立 网 站 取 一 个 域名 ， 而 且 要 尽量 让 域名 
称 会 关系 到 别人 是 否 很 容易 地 接受 你 的 网 页 。 


T 


1. 域名 的 分 类 

顶级 域名 共有 7 个 ， 也 就 是 现在 通常 所 说 的 国际 域名 。 由 于 Internet 最 初 是 在 美国 发 源 
的 ， 因 此 最 早 的 域名 并 无 国家 标识 ， 人 们 按 用 途 把 它们 分 为 几 个 大 类 ， 它 们 分 别 以 不 同 的 后 
级 结尾 : 


.com (用 于 商业 公司 ); 
.net〈 用 于 网 络 服务 ); 
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.org〈 用 于 组 织 协会 等 ); 

.gov《 用 于 政府 部 门 ); 

edu 《用 于 教育 机 构 ); 

mil (用 于 军事 领域 ); 

.int《〈 用 于 国际 组 织 )。 

最 初 的 域名 体系 也 主要 供 美国 使 用 ， 因 此 美国 的 企业 、 机 构 、 政 府 部 门 等 所 用 的 都 是 
“国际 域名 ” MA Internet 面向 全 世界 的 发 展 ， 除 .edu、.gov、.mil 一 般 只 被 美国 专用 外 ， 田 
外 三 类 常用 的 域名 .com、.org、.net 则 成 为 全 世界 通用 ， 因 此 ， 这 类 域名 通常 被 称 为 “国际 
域名 ” 直到 现在 仍然 为 世界 各 国 所 应 用 。 

决定 要 开办 网 站 后 ， 第 一 步 就 是 注册 一 个 域名 。 在 考虑 好 域名 的 名 称 后 ， 就 可 以 找 网 
络 代 理 公 司 进行 注册 。 注 册 .com 的 费用 一 般 在 100 元 左右 ， 根 据 提供 的 服务 和 保障 性 的 不 
同 ， 价 格 也 有 所 不 同 。 


2. 域名 解析 


注册 了 域名 之 后 ， 还 需要 购买 网 站 的 服务 器 虚拟 空间 。 注 册 后 服务 器 商会 提供 一 个 域 
名 指向 的 地 址 和 了 下 地址 。 下 面 以 一 个 实例 来 说 明 如 何 进行 域名 解析 。 
1) 在 注册 域名 之 后 ， 域 名 提供 服务 商会 给 用 户 一 个 域名 登录 管理 的 网 址 ， 同 时 会 给 用 
户 一 个 登录 的 用 户 名 及 密码 。 
2) 打开 IE 浏览 器 ， 在 “地 址 ” 栏 中 输入 域名 管理 地 址 ， 如 “http://dns.cnwindows.com/”， 
按 下 《Enter) 键 ， 打 开 登 录 页 面 ， 如 图 1-9 所 示 。 


Æ http://dns.cnwindows.com/ — Microsoft Internet Explorer 
; EPO SED ZEV REO IAO O XBhOD 


O=- 0- Ha p»ie-e2ms- 7 


£ 地 证 [I a http://dns. camindogs- comf x] Bes 


图 1-9 打开 的 域名 管理 登录 页 面 


3) 在 “域名 ”文本 框 中 输入 需要 指向 的 域名 地 址 ， 如 “congasa.cn”， 在 “管理 密 
码 ” 文 本 框 中 输入 服务 商 提 供 的 密码 ， 然 后 单 击 “登录 ”按钮 ， 进 入 域名 解析 管理 后 台 ， 
如 图 1-10 所 示 。 

4) 在 “主机 名 ”文本 框 中 输入 需要 指向 的 域名 ， 这 里 要 指向 的 是 一 个 企业 的 域名 。 如 
RE “www 企业 域名 .com”， 需 要 把 “企业 域名 .com” 和 “mail. 企 业 域 名 .com” 分 别 再 输入 
“主机 名 ”文本 框 。 其 中 “mail. 企 业 域名 .com” 是 企业 邮箱 指向 的 管理 地 址 。 也 就 是 说 ， 用 
PE IE 栏 里 输入 “mail. 企 业 域 名 .com” 就 会 指向 邮箱 后 台 管理 列表 。 在 “地 址 ”文本 框 中 
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输入 服务 器 IP 地 址 。 在 “记录 类 型 ”文本 框 中 有 “A 记录 ”“MX 记录 ”“CName〔 别 名)” 
3 个 单 选 按 钮 ， 代 表 了 访问 记录 时 的 先 顺 序 。“ 优 先 级 别 ” 是 指 MX 记录 的 优先 级 别 ， 数 值 
越 低 ， 优 先 级 越 高 ， 一 般 取 值 在 5 一 99 之 间 。 


下 企 商 在 线 域名 控制 面板 


i 文件 Z) MD EEV RRO IAV HHW 


Oa- O NAOn y e 2-3 c-LA 3 


EMOEQO [di nop: //dns. cnvindons con/main. ası 


ARZE: congasa cn 
ZARERTLE TU 20 个 二 妃 域 名 ,请 在 下 面 准 作 粘 的 域名 解析 信息 RETE 6 个 小 时 内 生效 》; 


[sis| e O e | Ra 
meL 


220. 113. 15. 18 


220 113.15 16 


© ER O wigR O cse Gig) 


10 (urie3ootEc3] MURRE, WEIS., 一般 取 值 在 5-99) 


加 果 您 要 提交 地 御 记录 9 记录) ， 请 在 主机 名 处 填写 “8” 了 为 空 ， 共 在 记录 基 型 处 法学 “上 Mail)” 
我 们 的 域名 服务 器 : ns. cnvindsw: com nsl. envindows. com 


域名 解析 主页 面 


图 1-10 


5) 输入 完 指向 地 址 及 主机 名 后 ， 单 击 “ 提 交 ” 按 钮 ， 设 置 的 域名 指向 就 会 显示 在 列表 
中 ， 经 过 几 小 时 之 后 可 以 输入 主机 名 进行 测试 ， 从 而 完成 域名 解析 操作 。 


3. 域名 的 备案 


上 面 我 们 了 解 了 域名 的 重要 性 、 域 名 的 选择 、 以 及 域名 的 注册 。 但 是 在 注册 完 域 名 


后 ， 还 需要 进行 域名 备案 


， 让 网 上 店铺 更 加 合法 化 ， 域 名 备案 一 般 都 是 域名 所 有 者 ， 直 接 登 


录 国家 工业 和 信息 化 部 的 “ICP/IP 地 址 /域名 信息 备案 管理 系统 ”进行 注册 备案 的 工作 ， 在 
登录 的 地 址 和 效果 如 图 1-11 所 示 。 


网 上 操作 即 可 备案 成 功 ， 


-atë 


vec wur sem emo IAT) 


olamk kenz meo ann 


7 法 律 法 规 

» OHIPMGDNGAT UD DAME 

> (99A RMODEXEN) COS)URR 
> OG*SIPNABRGXYEO 《 
^» (CURHHET: 
» MERSER ET 
» ORERETAN GA) 


> $UEBOXCNE Seem 0» IXNUAAANIT IRIS 
A mm > GATUMNANSEMUSE ， menona 
> Threcsentnua mron > XPMÉRERUIASCMT gm 
2007-0807 ^» ERTSTIERWGECOTA 2011-0028 
. résume 
[7 X 
1 HIREM ， masas [ian = 
» Furneemtü-mUSN. Gur 
上 MASA 
> WANAoTE GENER. 
> RNSERODCINRTTRCY YR wm = ] 
— BRE a 


ar yanran- ZEEN 


图 1-11 登录 的 地 址 和 效果 
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域名 信息 的 报 备 流程 图 如 图 1-12 所 示 。 


修改 信息 交 信息 BIS e 


图 1-12 域名 信息 的 报 备 流程 图 


操作 说 明 : 

在 备案 的 时 候 如 果 有 论坛 、 留 言 板 等 系统 是 不 容易 通过 的 ， 对 于 所 建立 的 网 站 而 言 ， 
在 开始 的 时 候 也 没有 必要 拥有 这 些 系统 。 在 备案 的 时 候 ， 不 管 是 在 哪里 注册 和 购买 的 网 站 空 
间 都 需要 与 提供 商 联系 ， 让 其 提供 备案 的 一 些 重要 信息 。 


1.3.3 ”购买 网 站 空间 


当 申 请 好 了 域名 之 后 ， 下 一 步 就 是 建立 网 站 服务 器 。 网 站 服务 器 要 用 专线 ， 或 其 他 
的 方式 与 互联 网 连接 。 这 种 网 站 服务 器 除了 存放 网 页 为 访问 者 提供 浏览 服务 之 外 ， 还 可 
以 提供 邮箱 服务 。 此 外 ， 还 可 以 在 服务 器 上 添加 各 种 各 样 的 网 络 服务 功能 ， 前 提 是 有 足 
够 的 技术 支持。 通常 ， 建 立 网 站 服务 器 的 模式 有 两 种 : 购买 独立 的 服务 器 进行 托管 和 租 
用 虚拟 空间 。 


1. 服务 器 托管 


服务 器 托管 是 指 在 购买 了 服务 器 之 后 ， 将 其 托管 于 一 些 网 络 服 务 机 构 〈 该 机 构 要 有 良 
好 的 互联 网 接 入 环境 )， 每 年 支付 一 定数 额 的 托管 费用 。 

2. 租用 网 站 空间 

租用 的 服务 器 空间 也 就 是 虚拟 主机 ， 用 来 存放 网 上 店铺 的 所 有 网 页 。 所 以 虚拟 主机 性 
能 的 优 和 劣 ， 直 接 影响 到 网 站 的 稳定 性 ， 使 用 时 需要 考查 的 指标 分 别 是 带宽 、 主 机 配置 、CGI 
权限 、 数 据 库 、 服 务 和 技术 文 持 等 。 空 间 大 小 合适 即 可 ， 对 于 一 般 的 网 站 来 说 ，100MB 已 
是 一 个 足够 大 的 空间 。 如 果 单 纯 放置 文字 ，100MB 相当 于 5000 多 万 个 汉字 ; 若 以 标准 网 页 
计算 ， 大 致 可 容纳 1000 页 A4 幅面 的 网 页 和 2000 张 网 页 图 片 。 

服务 器 托管 、 域 名 注册 及 虚拟 主机 购买 等 业务 基本 上 是 找 第 三 方 进行 合作 的 ， 现 在 国 
内 比较 出 名 的 万 网 官网 如 图 1-13 所 示 ， 新 网 官网 如 图 1-14 所 示 。 
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新 网 官网 
册 成 会 员 并 在 后 台 


Ir 


助 实现 域名 和 空 


间 的 购买 、 解 析 等 操作 。 


14 | 网 站 的 整体 规划 


在 进行 一 个 网 站 的 设计 之 前 ， 明 确 网 站 设计 的 风格 、 特 点 


是 很 重要 的 。 下 面 介 


交纳 相应 的 费用 之 后 ， 即 可 在 网 上 


站 绍 网 站 建 


设 整 体 规划 设计 的 一 些 基础 知识 。 网 站 设计 所 包含 的 内 容 非 常 多 ， 大 体 分 为 两 个 方面 : 


其 一 是 利用 币 


动态 网 页 人 设计 等 


Ws 静态 无 声 图 片 设计 ， 根据 需要 ， 
其 二 是 网 站 的 延伸 设计 。 
主要 包括 网 站 的 主题 定位 和 浏览 群 的 定位 、 和 名 


。 前 期 还 要 利用 Photoshop 或 者 是 Fireworks 
还 可 以 利用 Flash 实现 动画 效果 。 


知 能 交互 、 制 作 策 划 、 形 象 包装 、 


| 作 网 站 的 软件 ， 如 Dreamweaver， 进 行 网 页 设计 、 文 字 排 版 、 链 接 设 计 、 
等 平面 设计 软件 实现 平面 设 


它 是 指 脱离 软件 ， 在 网 站 建设 之 前 、 之 后 进行 的 网 站 建设 与 策划 ， 
宣传 营销 等 。 
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144 网 站 栏目 设计 


当 明 确 网 站 的 主题 和 风格 后 ， 就 要 围绕 主题 制作 相应 的 内 容 。 首 先 选择 相应 的 网 站 题 
es a 

以 下 为 一 些 常 见 网 络 栏 目的 题材 ， 希 望 能 对 读者 有 所 启发 。 

和 些 网 站 栏目 

公司 简介 、 公 司 动态 、 在 线 搜索 、 购 物 消 费 、 网 上 招聘 、 产 品 介绍 、 在 线 加 盟 、 股 市 
信息 、 流 行情 报 、 阳 光 服 务 、 支 持 下 载 、 网 上 公告 等 。 

(2) 关于 娱乐 生活 类 的 一 些 网 站 栏目 
国画 画廊 、 古 典 音乐 、 武 器 博物 馆 、 古 今 佳 句 名言 、 游 戏 排行 榜 、 游 戏 天 党 、 金 庸 客 
栈 、 象 棋 世 家 、 能 吃 是 福 、GIF 动画 库 、 陶 艺 园地 、 漫 画 天 地 、 中 国足 球 、 摄 影 俱乐部 、 幽 
默 轻松 、 体 育 博览 、 电 子 贺 卡 、 旅 游 天 地 、 电 影 世界 、 影 视 偶像 、 天 文 星空 、MIDI 金曲 、 
宠物 猫 、 儿 歌 专集 等 。 

栏目 设计 是 网 站 规划 中 的 核心 问题 ， 需 要 非常 明确 和 具体 。 建 立 网 站 的 目的 即 是 一 个 
网 站 的 目标 定位 问题 ， 网 站 的 功能 和 内 容 ， 以 及 各 种 网 站 推广 策略 都 是 为 了 实现 网 站 的 预期 
目的 。 在 实际 的 网 站 栏目 设计 过 程 中 经 常 遇 到 很 多 企业 的 网 站 栏目 千篇一律 都 是 “公司 简 

介 ”“ 公 司 动 态 ”“ 网 上 招聘 ”“ 产 品 介绍 ”“ 在 线 加 盟 ”*”“ 网 上 公告 ”等 词 ， 一 般 的 浏览 者 一 
进 这 种 网 站 基本 上 者 不 会 去 认真 地 浏览 网 页 内 容 的 。 例 如 “清美 珑 政 艺 术 馆 ”沟通 过 其 网 站 
的 栏目 定位 问题 ， 原 来 是 想 用 “首页 ”产品 展示 ”“ 书 画作 者 ”礼品 产品 ”“ 定 制 书画 ” 
“文化 栏目 ”“ 夯 家 画册 ”“ 拍 卖 专栏 ”“ 收 藏 信息 ”“ 论 坛 ” 儿 个 栏目 ， 但 经 以 需求 为 导向 润 
色 栏 目的 叫 法 。 优 化 后 的 网 站 栏目 效果 如 图 1-15 所 示 。 


DH EJUAREYAIHEBI C sa — 
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图 1-15 优化 后 的 网 站 栏目 


效果 


NS 


14.2. 网 站 形象 设计 


一 个 好 的 电子 商务 网 站 ， 和 实体 公司 一 样 ， 也 需要 整体 的 形象 包装 和 设计 。 准 确 的 、 
有 创意 的 VI CVisual Identity， 视 觉 识 别 ) 设计 ， 对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 所 
iH VI， 通 俗 地 讲 就 是 通过 视觉 来 统一 网 站 的 形象 。 在 网 站 主题 和 名 称 确 定 后 ， 需 要 思考 的 
就 是 网 站 的 VI 形象 了 。 其 实 ， 现 实生 活 中 的 VI 策划 比比 缘 是 ， 例 如 肯德基 公司 ， 其 全 球 
统一 的 标志 、 色 彩 和 产品 包装 ， 给 人 的 印象 极为 深刻 。 


1. 设计 网 站 Logo 
网 站 Logo 就 是 网 站 的 标志 。 网 站 Logo 是 站 点 特色 和 内 涵 的 集中 体现 ， 使 浏览 者 看 
JL Logo 就 联想 起 站 点 。 目 前 国内 和 国际 的 网 站 已 经 相当 多 了 ， 要 想 与 众 不 同 ， 那 么 跟 
别 的 网 站 进行 Logo 链接 交换 是 很 有 必要 的 。 简 单 地 说 就 是 在 别人 的 网 站 上 放 一 个 用 户 


16 


第 1 章 ” 电 子 商 务 网 站 前 期 策划 1 


的 Logo， 用 来 链接 到 自己 的 网 站 。 当 然 ， 若 Logo 很 能 引 人 注 目 ， 网 站 的 浏览 量 不 就 增 
加 了 吗 ? 
Logo 的 设计 创意 来 自用 户 网 站 的 名 称 和 内 容 ， 可 以 是 中 ee 
文 、 英 文字 母 、 符 号 、 图 案 ， 也 可 以 是 动物 或 者 人 物 等 。 比 ,0 
如 百度 公司 就 是 以 Baidu 加 一 个 小 脚 丫 及 中 文 百 度 作为 象征 Bai c 百度 
性 标志 ， 很 是 吸引 人 ， 如 图 1-16 所 示 。 
注意 : 图 1-16 百度 的 网 站 Logo 
如 果 用 户 本 身 拥有 不 错 的 企业 Logo 也 是 可 以 用 做 网 站 Logo 的 ， 这 样 能 让 用 户 的 网 站 
VI 和 企业 的 VI 保持 一 致 。 
网 络 Logo 不 单 要 考虑 其 在 电脑 高 分 状 率 屏幕 上 的 显示 效果 ， 更 应 该 考虑 到 网 站 整体 发 展 到 
一 定 高 度 时 在 相应 的 推广 活动 中 所 要 达到 的 效果 ， 使 其 在 应 用 于 各 种 媒体 时 ， 也 能 充分 发 挥 Logo 
的 视觉 效果 ， 还 应 考虑 到 网 络 Logo 在 传真 、 报 纸 、 杂 志 等 传媒 介质 上 的 单 色 效果 、 反 白 效 果 ， 
在 织物 上 的 纺织 效果 ， 在 车 体 上 的 油漆 效果 ， 制 作 徽章 时 的 金属 效果 ， 墙 面 立体 的 造型 效果 等 。 


2. 网 站 标准 色彩 


不 可 否认 ， 网 站 给 人 的 第 一 印象 来 自视 觉 冲击 ， 因 此 确定 网 站 的 标准 色彩 是 相当 重要 
的 一 步 。 不 同 的 色彩 搭配 将 产生 不 同 的 视觉 效果 ， 当 然 可 能 会 影响 到 浏览 者 的 情绪 。 网 站 的 
选择 和 确定 ， 是 根据 网 站 所 选择 的 题材 和 用 户 自己 的 个 人 性 格 特点 决定 的 。 

“标准 色彩 ”就 是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 例 如 ， 麦 当 劳 的 红色 条 块 、 
163 邮箱 首页 的 天 蓝 色 (图 17170 等 ， 都 给 人 很 贴切 、 很 和 谐 的 视觉 效果 。 
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图 1-17 163 邮箱 
一 个 网 站 的 标准 色彩 通常 不 超过 3 种 ， 太 多 则 让 人 眼花 练 乱 。 标 准 色 彩 要 用 于 网 站 的 
标志 、 标 题 、 主 菜单 和 主 色 块 ， 给 人 以 整体 统一 的 感觉 。 当 然 ， 其 他 色彩 也 可 以 使 用 ， 但 只 
是 作为 点 缀 和 衬托 ， 绝 不 能 喧 宾 夺 主 。 通 常 ， 适 合作 为 网 站 标准 色 的 颜色 有 蓝 色 、 黄 / 橙 
色 、 黑 / 灰 / 白 色 三 大 系列 。 在 配色 的 时 候 要 注意 如 下 事项 : 
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[x 


BW 


在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


1) 建设 网 站 之 前 ， 一 定 要 了 解 网 站 所 要 传达 的 信 ， 


昌 和 品牌 ， 选 择 可 以 加 强 这 些 信息 


] 


颜色 。 例 如 ， 在 设计 一 个 强调 稳健 的 金融 机 构 的 网 站 时 ， 首 要 选择 冷色 系 。 在 这 样 的 状况 
下 ， 如 果 使 用 暖色 系 或 活泼 的 色 系 ， 可 能 会 破坏 该 网 站 的 品牌 形象 。 

2) 还 要 了 解 此 网 站 的 读者 群 。 文 化 差异 可 能 会 使 色彩 产生 非 预期 的 反应 。 同 时 还 要 知 
道 ， 不 同 地 区 与 不 同年 龄 层 的 人 群 对 颜色 的 反应 亦 会 有 所 不 同 。 

3) 网 站 的 设计 不 要 使 用 过 多 的 颜色 。 主 色 系 及 修饰 色 共 选择 四 到 五 个 颜色 就 够 了 。 太 
多 的 颜色 会 导致 混淆 ， 同 样 也 会 分 散 读 者 的 注意 力 。 

4) 在 阅读 的 部 分 使 用 对 比 色 。 因 为 颜色 太 接 近 无 法 产生 是 够 的 对 比 效果 ， 也 会 妨碍 观 
众 阅 读 。 通 常 白 底 黑 字 的 阅读 效果 最 好 。 

5) 通常 ， 在 设计 网 站 时 采用 灰色 阶 来 测试 对 比 。 当 用 户 在 处 理 黑色 、 白 色 和 灰色 以 外 
的 颜色 时 ， 有 时 候 会 很 难 决定 每 种 颜色 的 相对 值 。 为 了 要 确认 色 盘 能 提供 足够 的 对 比 ， 可 以 


费 
色 


P 


"PS 


建立 一 个 仿真 网 站 ， 并 : 
6) 设计 网 站 时 选择 颜色 也 要 六 


各 它 转 换 成 灰色 阶 即 可 。 


EISE ARCH 


7) 在 


8) i 


ri 


在 色彩 的 运 月 


者 很 快 就 会 对 流行 色彩 感 3 
色彩 ， 从 而 激 起 人 们 的 ; 
用 软件 设计 网 页 上 
《如 标题 和 超 链接 等 ) H 
还 要 注意 网 站 色差 问题 。 每 一 个 网 站 的 开发 人 员 都 知道 
显示 的 时 候 都 会 有 些 不 同 。 因 
HER 


不 旧 之 情 


Ho 


的 时 候 ， 选 择 颜 1 


色 时 请 考虑 功能 性 
分 建立 功能 性 的 颜色 。 


此 ， 开 发 人 员 应 在 不 


E。 同 一 个 色彩 很 容易 就 充斥 着 
下 厂 木 。 但 从 另外 一 个 角度 来 看 ， 用 户 可 以 使 用 儿 十 年 前 的 流行 


的 颜 人 


， 即 使 是 网 络 通 月 


色 。 别 忘 了 对 关键 信 ， 


整个 市 场 ， 且 消 


Ll 


U^ 


色 ， 在 


HR 


同 的 作业 平台 上 测试 月 


主意 的 一 个 问题 是 : 由 了 


国家 、 宗 教 和 信仰 的 不 同 ， 以 


P. XN 
色彩 的 喜好 有 者 


地 到 


人 位置、 文化 修养 的 差异 等 ， 不 同 的 人 群 对 ; 
要 考虑 主要 用 户 群 的 构成 和 背 


E 
Ao 


一 般 来 说 ， 不 同 的 色彩 所 传达 的 含义 亦 有 所 不 同 ， 例 如 : 


红色 : 代表 热情 、 


浪漫 、 火 焰 、 暴 力 、 侵 略 。 红 色 在 很 多 文化 中 代表 的 是 停 ]| 


当然 ， 为 了 
业 可 以 使 用 粒 


之 ， 


的 英文 艺术 字体 供 下 载 ， 所 以 要 寻找 一 球 满 意 的 字体 并 不 
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些 动作 。 


R [E [R [R [R [R 


RE OBW 4 
、 安 全 、 
、 稳 定 、 
pin 
、 精 致 、 


很 大 的 差异 。 所 以 在 设计 时 


秘 、 稀 有 。 紫 色 在 某 些 
TRSE. "M. VeUR. SI. 
成 长 、 忌 妨 。 绿 人 


文化 


e 
及 


需 


HJ" ffi 


ERR 


与 死记 有关。 


色 在 某 些 文化 中 与 环保 有 关 。 


X. fuss. 
现代 感 、 死 亡 、 


Js. A. 


3. 设计 标准 字体 


标准 字体 是 指 用 于 标志 、 
本 现 网 站 的 “与 众 不 同 ” 可 以 根据 需要 选择 一 
| 仿宋 体 ， 体 现 设 计 精 美 可 以 
,网 站 所 表达 的 内 容 


要 根据 


d. X 


. QR. EOM 


LE、 和 平 、 冷 淡 、 


负 之 。 


X 


Hd 
r5 


标题 、 主 菜单 的 特有 字体 。 通 
tk 


地 别 字体 。 


网 站 默认 的 字体 是 宋体 。 


广告 体 ， 体 现 亲切 


随意 可 以 


例如 ， 为 了 体现 专 


] 手 写 体 ， 等 等 。 总 


， 选 择 贴 切 的 字体 。 


目前 常见 的 ， 


— 
XF 


Aug —— ERES A IREF AAE A 


TR. iR 


上 还 有 


困难 。 需 要 说 明 的 是 ， 要 使 用 非 默 


Y 


[多 专 有 


H 


认 字 体 ， 就 必须 把 文字 内 容 设置 成 图 
特别 的 字体 而 无 法 正常 显示 。 


1.4.3 ”确定 网 站 框架 


角 定 网 站 的 框架 ， 就 是 在 目标 明确 的 基 而 
是 在 题材 选 定好 之 后 很 重要 的 一 步 。 要 做 到 主题 鲜 
言 和 画 

网 站 应 具备 的 基本 成 分 包括 以 下 几 方面 内 容 ; 


片 的 格式 ， 因 


1) 页 头 ; 准确 无 误 地 标识 
20 联系 方式 : 如 企业 的 地 址 


3) 版 权 信息 : 声明 版 权 所 有 者 等 。 


注意 : 
重复 利用 已 有 信息 。 
举 地 用 到 企业 的 Web 站 点 中 。 


全 面 仔细 


地 规划 架构 一 个 网 站 时 ， 通 常 可 以 选 月 


列 出 来 ， 尤 其 是 用 户 要 制作 的 网 站 比较 大 
到 以 后 可 能 的 扩充 性 ， 免 得 做 好 后 要 一 改 再 改 ， 这 样 既 浪 费 资 源 又 消耗 精力 。 
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为 一 部 分 浏览 者 的 计算 机 上 


DX 
明 突 出 、 要 点 


] 户 的 站 点 和 企业 标志 。 
、 电 话 和 E-mail 地 址 。 


寺 ， 规 划 架 构 好 网 站 就 非常 重要 了 。 


没有 安装 这 种 


上 ， 完 成 网 站 的 构思 创意 即 总 体 设计 方案 。 这 
明确 ， 就 要 以 简单 明确 
面体 现 站 点 的 主题 。 调 动 一 切 手段 充分 表现 网 站 的 个 性 和 情趣 ， 以 办 出 网 站 的 特点 。 


的 语 


如 客户 手册 、 公 共 关 系 文档 、 技 术 手 册 和 数据 库 等 都 可 以 轻 而 易 


昌 树 结构 大 致 地 把 每 个 页 面 的 内 容 大 纲 


同时 还 要 考虑 


大 岗 列 出 来 后 ， 还 要 考虑 页 面 与 页 面 之 间 的 链接 关系 ， 是 星 形 、 树 形 ， 还 是 网 形 链 


接 。 当 然 ， 这 也 是 判别 一 个 网 站 优 劣 的 重要 标志 。 
难 ， 影 响 内 容 的 发 挥 。 


为 了 提高 浏览 效率 ， 方 便 资料 的 寻找 ， 一 般 的 


链接 混乱 、 层 次 不 清 的 站 点 会 造成 济 


We 
JA 


网 站 框架 基本 采用 “ 浦 


有 的 主要 链接 都 在 首页 上 ， 主 次 链接 之 问 的 相互 链接 是 可 逆 的 。 


公 


英 ” 式 ， 即 所 


框架 确定 下 来 之 后 ， 就 可 以 有 条 不 率 地 往 下 做 ， 这 为 网 站 将 来 的 发 展 打 下 了 良好 的 基础 。 
1.44 制作 注意 事项 

有 了 前 面 几 节 的 知识 ， 制 作 网 站 还 要 特别 注意 如 下 一 些 问题 ， 以 保证 所 开发 的 网 站 达 
到 其 实用 性 。 

(1) 网 站 版 式 的 设计 

网 站 设计 作为 一 种 视觉 语言 ， 要 讲究 编排 和 布局 ， 虽 然 首页 的 设计 不 等 同 于 平面 设 
计 ， 但 它们 有 许多 相近 之 处 ， 应 充分 加 以 利用 和 借鉴 。 版 式 设计 是 通过 对 文字 和 图 形 的 空间 
组 合 来 表达 和 谐 与 美 。 一 个 优秀 的 网 站 设计 者 要 知道 每 一 段 文 字 或 每 一 个 图 形 该 落 于 何 处 ， 


才能 使 整个 网 站 看 起 来 和 谐 美观 。 多 页 面 站 点 的 页 面 


好 地 反映 出 来 ， 特 别 要 处 理 好 页 面 之 间 与 页 面 之 内 的 秩序 。 


果 ， 会 讲究 整体 布局 的 合理 性 ， 使 浏览 者 有 一 个 流畅 的 视觉 体验 。 


(2) 网 站 形式 与 内 容 的 统一 


现 内 容 的 丰富 含义 。 运 
文字 、 


对比 与 调和 、 对 称 与 平衡 、 节 奏 与 韵律 以 及 留 
图 形 之 间 的 相互 关系 建立 整体 的 均衡 状态 ， 产 9 


编排 设计 要 求 把 页 面 之 间 的 有 
通常 为 了 达到 最 佳 的 视觉 表现 效 


机 联系 很 


要 将 丰富 的 意义 和 多 样 的 形式 组 织 成 统一 的 页 面 结构 ， 形 式 语言 必须 符合 页 面 的 内 容 ， 体 


TFE WIEN, 


E 和 谐 的 美感 。 如 对 称 原 则 在 页 面 设计 
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中 ， 它 的 均衡 有 时 会 使 页 面 显得 采 板 ， 但 如 果 加 入 一 些 富有 动感 的 文字 、 图 案 ， 或 采用 夸张 的 


手法 来 表现 内 容 ， 往 往 会 达到 比较 好 的 效果 。 点 、 线 、 面 作为 视觉 语言 中 的 基本 元 素 ， 要 使 用 


点 、 线 、 面 的 互相 穿插 、 互 相 衬 托 、 互 相 补 充 ， 以 构成 最 佳 的 页 面 效 果 。 网 站 设计 中 点 、 线 、 


面 的 运用 并 不 是 孤立 的 ， 很 多 时 候 都 需要 将 它们 结合 起 来 ， 才 可 以 完美 地 表达 出 设计 意境 。 
(3) 三 维 空间 的 构成 和 虚拟 现实 
网 络 上 的 三 维 空间 是 一 个 假想 空间 。 这 种 空间 关系 需 借助 动静 变化 、 图 像 的 比例 关系 等 空 

间 因 素 表 现 出 来 。 在 页 面 中 ， 图 片 、 文 字 位 置 前 后 车 压 ， 或 页 面 位 置 变 化 所 产生 的 视觉 效果 均 

不 相同 ， 图 片 、 文 字 前 后 合 压 所 构成 的 空间 层次 目前 还 不 多 见 ， 网 上 更 多 的 是 一 些 设计 比较 规 

范 、 简 明 的 页 面 ， 这 种 登 压 排列 能 产生 强 节奏 的 空间 层次 ， 视 觉 效果 强烈 。 网 站 上 常见 的 是 页 


面 上 、 下 、 左 、 


右 、 中 他 


区 


置 所 产生 的 空间 关系 ， 以 及 下 密 的 位 置 关系 所 产生 的 空间 层次 ， 这 两 


种 位 置 关系 使 产生 的 空间 层次 富有 弹性 ， 同 时 也 让 人 产生 轻松 或 紧迫 的 心理 感受 。 目 前 ， 人 们 


己 不 满足 于 HTML 语言 编 
(4) 多 媒体 功能 的 利用 
网 络 资源 的 优势 


R22 


制 的 二 维 Web 页 面 ， 


三 维 世界 的 诱惑 开始 吸引 更 多 的 人 。 


之 一 是 多 媒体 功能 。 要 吸引 浏览 者 的 注意 力 ， 页 面 的 内 容 还 可 以 借助 


三 维 动画 、 Flash 等 来 表现 。 但 要 注意 的 是 ， 


现 网 站 的 内 容 时 应 考虑 客户 端的 传输 速率 。 


(5) 网 站 测试 和 改进 
网 站 测试 实际 上 是 模拟 用 户 询问 网 站 的 过 程 ， 用 以 从 测试 中 发 现 问 题 并 改进 设计 。 要 
注意 让 用 户 参 与 网 站 测试 。 


(6) 内 容 更 新 与 沟通 
网 站 Web 站 点 建立 后 ， 要 不 断 更 新 内 容 。 站 点 信息 的 不 断 更 新 ， 让 浏览 者 更 多 地 了 解 
企业 的 发 展 动态 等 ， 同 时 也 会 帮助 企业 建立 良好 的 形象 。 通 常 在 企业 的 Web 站 点 上 ， 要 认 


真 回复 用 户 的 电子 邮件 和 信件 、: 
用 户 的 用 意 进行 分 类 ， 


! 于 网 络 带 宽 的 限制 ， 在 使 用 多 媒体 的 形式 表 


EE 话 咨 询 和 传真 等 传统 的 联系 方式 ， 做 到 有 问 必 答 。 最 好 将 
如 售 前 一 般 了 解 、 和 售后 服务 等 ， 并 交 由 相关 部 门 处 理 ， 使 浏览 者 感受 


到 企业 的 真实 存在 并 由 此 产生 信任 感 。 值 得 提示 的 是 ， 不 要 许诺 用 户 实现 不 了 的 东西 ， 在 真 


正 有 能 力 处 理 回 复 之 前 ， 不 要 恳求 用 户 输入 其 个 人 信息 或 罗列 一 大 堆 自 己 不 能 及 时 答复 的 电 


话 写 码 。 如 果 要 求 浏览 者 自愿 提供 其 个 人 信息 ， 应 公布 并 认真 履行 保护 其 个 人 隐私 的 承诺 。 


C) 合理 运用 新 技术 


新 的 网 站 


运用 网 站 制作 


关 作 技术 几乎 每 天 都 会 出 现 ， 如 果 不 是 网 络 技术 介绍 的 专业 网 站 ， 一 定 要 合理 地 
的 新 技术 ， 切 忌 将 网 站 变 为 一 个 制作 网 站 的 技术 展台 。 对 于 网 站 设计 者 来 说 ， 永 


远 要 记 住 : 用 户 方便 快捷 地 得 到 所 需要 的 信息 是 最 重要 的 。 必 须 学 习 、 跟 踪 及 掌握 网 站 设计 的 


新 技术 ， 如 Java, DHTML, XML 45, JEA 


15 | 电子 商务 网 站 鉴赏 


一 个 优秀 的 电子 商务 j 
强烈 地 冲击 和 震撼 ， 能 让 用 户 产生 视觉 上 的 


据 网 站 的 内 容 和 形式 ， 将 其 合理 地 应 用 到 设计 中 。 


网 站 不 但 要 拥有 强大 的 交互 功能 ， 还 应 该 在 视觉 效果 上 给 用 户 以 


k 鸣 。 因 此 ， 在 设计 网 站 的 时 候 ， 要 充分 从 视觉 


艺术 的 角度 考虑 整个 网 站 的 布局 。 只 有 将 设计 理念 与 该 行业 的 特点 紧密 联系 起 来 ， 才 能 设计 
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出 精美 的 电子 商务 网 站 。 
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下 面 就 从 网 页 设计 和 角度 来 分 析 一 下 热门 精美 网 站 应 该 如 何 设计 才 会 更 加 吸引 人 。 


1) 首先 就 从 电子 类 产品 销售 网 站 看 起 吧 ， 这 里 列举 了 图 


1-18 和 图 1-19 所 示 的 两 个 电 


子 类 产品 销售 网 站 。 总 体 上 来 看 ， 这 两 个 网 站 都 是 非常 漂亮 的 ， 其 吸引 人 的 地 方 在 于 配色 和 


结构 布局 。 电 子 类 产品 的 金属 感 很 强 ， 所 以 这 类 网 站 使 朋 
结构 布局 上 来 看 ， 图 1-18 所 示 的 网 站 简单 大 方 让 人 一 目 了 然 ， 而 图 1-19 所 示 的 网 站 页 面 比 


较 传统 ， 在 国内 目前 比较 流行 。 在 设计 的 时 候 ， 页 面 布 局 要 根据 所 销售 产品 
宜 采 用 图 1-18 所 示 的 简单 型 的 页 面 布局 。 


定 ， 如 果 销 售 的 产品 单一 ， 
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图 1-18 简洁 大 方 的 电子 类 产品 网 站 
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图 1-19 ”传统 式 布局 的 网 站 


银灰 色 作为 底 色 是 最 好 的 选择 。 从 


的 内 容 的 多 少 来 
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WEBB: 
电子 类 产品 网 站 宜 选 择 银灰 色 为 背景 主 和 色调， 这 样 更 能 衬托 出 所 销售 产品 的 金属 质感 。 


20 珠宝 首饰 产品 类 网 站 的 设计 追求 高 贵 、 尊 贵 的 元 素 。 现 介绍 一 个 关于 钻石 销售 的 网 
站 ， 其 效果 如 图 1-20 所 示 。 在 该 实例 中 ， 要 介绍 的 是 它 的 配色 。 访 问 该 网 站 的 时 候 ， 给 人 
的 第 一 感觉 就 是 十 分 的 大 气 、 高 贵 ， 左 上 和 角 的 钻石 办 内 发 亮 、 颗 粒 饱 满 ， 可 见 它 的 价值 不 
菲 ， 让 人 第 一 时 间 就 想 拥 有 它 ， 这 人 么 一 个 布局 简单 的 网 站 ， 为 什么 会 有 那样 的 感觉 呢 ? 它 的 
成 功 在 于 它 的 配色 。 要 知道 钻石 都 是 晶莹 剔透 的 ， 所 以 在 设计 此 类 网 站 的 时 候 ， 通 常会 选择 
用 深 色 或 者 暗色 来 衬托 钻石 的 质感 。 该 网 站 采用 了 高 贵 、 大 气 的 瞳 红色 作为 底 色 ， 更 加 突出 
了 钻石 的 特点 。 该 网 站 的 整体 设计 虽然 简单 ， 但 确实 很 成 功 。 
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图 1-20 销售 钻石 的 网 站 效果 

说 明 : 

拿 该 网 站 来 介绍 的 目的 是 ， 指 导读 者 在 设计 网 站 的 时 候 ， 在 突出 产品 特殊 效果 的 时 
候 ， 不 要 忽略 了 整个 网 站 的 主 色 调 。 在 配色 的 时 候 宜 以 产品 的 主 色 调 出 发 ， 通 过 以 下 两 种 设 
计 思 路 完成 : 第 一 种 ， 由 产品 的 色调 出 发 ， 选 择 相同 色 系 ， 以 和 谐 的 视觉 来 衬托 产品 ; 第 二 
种 ， 还 是 由 产品 的 色调 出 发 ， 选 择 完全 相反 的 色调 来 衬托 产品 的 图 片 。 注 意 : 最 忌讳 用 不 合 
适 的 颜色 来 搭建 网 站 。 


3) 虚拟 商品 及 充值 业务 类 的 网 站 开办 者 估计 也 不 会 少 。 图 1-21 所 示 为 一 游戏 网 站 。 
该 网 站 特别 吸引 年 轻 人 ， 网 站 的 核心 就 突出 了 游戏 主人 公 的 人 物 形象 ， 简 单 、 直 接地 表达 了 
网 站 的 内 容 ， 从 网 页 的 布局 上 来 看 它 也 是 很 有 创意 的 ， 注 重 细节 的 动画 展示 。 

说 明 : 

对 于 此 类 网 站 的 创意 设计 ， 要 注重 迎合 年 轻 人 的 口味 ， 根据 自己 所 销售 产品 的 最 终 消 
费 群 的 眼光 来 设计 网 站 的 效果 ， 宜 选择 时 尚 的 颜色 ， 有 创意 性 的 网 页 布局 。 抓 住 年 轻 消费 者 
的 视觉 其 实 就 等 于 抓 住 了 销售 成 功 的 关键 。 
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WELCOME! 


(WW D-05449 17121 


X 
H 


图 1-21 游戏 网 站 


4) 销售 礼品 花 开 的 网 站 如 图 1-22 所 示 。 该 网 站 的 特点 在 于 它 的 整体 结构 设计 ， 目 前 
国内 网 页 设计 还 停留 在 固定 模式 :界面 上 首先 是 Banner〈 广 告 动 画 )， 然 后 就 是 导航 ， 接 
站 来 就 是 文字 内 容 ， 最 后 是 版 权 页 。 而 该 实例 完全 是 “封面 型 ”的 创意 ， 当 我 们 观看 此 网 
站 的 时 候 ， 就 好 像 欣赏 一 本 画册 一 样 ， 可 以 直接 浏览 到 产品 的 大 幅 图 片 ， 从 而 有 利于 产品 
的 在 线 销 售 。 


ic Design 1 EN 


党 Fresh works gallery 
Welcome 
to ovr Floral Design Site! 


Oeean A55 的) E 


read nore abat us 


Copmgh 2004 Ford Dus Al rights reserved. 
Tame ol wis | Foam Palio 


图 1-22 ”销售 礼品 花 开 的 网 站 

对 于 销售 居家 产品 这 样 的 网 站 ， 设 计 的 核心 一 定 要 突出 产品 本 身 。 图 1-23 所 示 为 销售 
啤酒 的 网 站 。 表 面 上 看 来 ， 其 结构 还 是 比较 简单 的 ， 只 有 图 片 与 产品 的 文字 介绍 。 其 实 不 
然 ， 从 细节 上 看 ， 它 是 很 成 功 的 网 站 。 该 网 站 打造 的 细节 就 是 设置 简单 大 方 ， 不 拖泥带水 ， 
突出 所 销售 的 产品 ， 其 他 的 一 笔 带 过 ， 重 点 突出 ， 让 观看 的 人 一 目 了 然 。 


un 


i 
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图 1-23 ”销售 啤酒 的 网 站 


说 明 : 

对 于 网 页 的 整体 布局 ， 规 划 设 计 也 是 至 关 重 要 的 。 尽 量 采 用 一 些 特殊 的 结构 布局 ， 可 
以 从 视觉 上 获得 更 多 的 吸引 力 。 提 示 : 对 于 一 些 特殊 产品 ， 如 果 防 止 被 别人 复制 ， 则 可 以 开 
发 成 Flash 文档， 这样 在 布局 设计 上 更 具有 灵活 性 。 

5) 男女 服饰 网 站 的 设计 。 这 里 以 图 1-24 和 图 1-25 所 示 的 两 个 网 站 为 例 进行 说 明 。 
1-24 所 示 为 流行 销售 网 站 ， 其 采用 了 直截了当 、 简 洁 大 方 的 设计 原则 ， 把 所 销售 的 产品 
直接 作为 网 站 设计 的 元 素 ， 导 航 采 用 了 大 色 块 加 上 30% 的 灰色 底 纹 ， 衬 托 出 了 包 的 特色 。 
由 于 图 1-25 所 示 网 站 所 销售 的 衣服 是 针对 年 轻 人 的 ， 所 以 设计 者 在 网 页 布局 的 创意 上 下 了 
很 大 的 功夫 ， 对 每 一 个 细节 都 做 了 单独 的 设计 ， 做 得 特别 的 花哨 ， 很 符合 年 轻 人 的 口味 。 


Sound cf | om 
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图 1-24 流行 包销 售 网 站 
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图 1-25 年 轻 人 衣服 销售 网 站 

说 明 : 

对 于 销售 服饰 以 及 鞋 类 等 产品 的 网 站 ， 在 设计 网 页 的 时 候 宜 从 所 销售 产品 的 消费 者 的 
年 龄 段 出 发 ， 配 色 上 上 既 要 注意 产品 自身 的 颜色 特点 ， 也 要 兼顾 消费 者 的 眼光 。 在 结构 布局 上 
宜 采 用 大 幅 图 片 的 形式 直接 表达 产品 ， 可 以 采用 电子 相册 等 方式 在 网 站 上 直接 发 布 精美 的 产 
品 图 片 ， 以 达到 吸引 顾客 的 目的 。 


6) 儿童 用 品类 的 网 站 设计 要 突出 童 趣 的 特点 。 图 1-26 所 示 为 儿童 消费 网 站 。 不 论 是 
标志 的 设计 还 是 对 产品 的 展示 部 分 ， 该 网 站 都 使 用 了 特别 活泼 可 爱 的 颜色 。 从 结构 布局 上 来 
看 ， 该 网 站 的 导航 主要 以 图 片 的 形式 展示 ， 在 设计 的 时 候 也 注意 了 每 一 个 细节 ， 所 有 不 同 菜 
单 的 颜色 和 底 纹 都 用 不 同 的 方式 进行 表达 ， 符 合 儿童 的 心理 特点 。 


BORN -9 


JOURNAL 


图 1-26 儿童 消费 网 站 
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说 明 : 

在 设计 该 类 网 站 的 时 候 难 度 还 是 比较 大 的 ， 需 要 使 用 特别 多 的 色彩 和 结构 来 表达 所 销 
售 的 产品 特点 。 如 果 在 设计 的 时 候 颜 色 搭配 不 合理 ， 没 有 一 定 的 整体 规划 和 设计 理念 ， 那 么 
设计 出 来 的 页 面 会 是 杂 妃 无 章 的 。 这 类 网 站 宜 事先 设计 好 结构 布局 再 设计 色彩 。 

对 于 其 他 类 的 电子 商务 网 站 设计 ， 这 里 不 再 进行 具体 介绍 了 。 在 设计 的 时 候 要 整体 把 
握 从 消费 者 的 眼光 出 发 ， 先 规划 后 设计 的 创意 原则 ， 这 样 才 能 设计 出 适合 市 场 的 电子 商务 
网 站 。 
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使 用 PHP 开发 电子 商务 网 站 是 现 阶段 应 有 


上 得 最 多 的 技术 模式 ， 因 此 


本 书 也 挑选 PHP 开 


发 语言 作为 电子 商务 平台 的 实现 方法 。PHP 是 一 种 多 用 途 脚 本 语言 ， 尤 其 适合 于 Web 应 用 
大 的 扩展 性 ， 可 以 在 服务 端 连接 Java 应 用 程序 ， 还 可 以 与 .NET 


程序 的 开发 。 使 用 PHP 强 


建立 有 效 的 沟通 甚至 更 广阔 


的 扩展 ， 从 而 建立 一 个 强大 的 环境 ， 以 充分 利用 现 有 的 和 其 他 技 


术 开 发 的 资源 。 并 且 ， 开 源 和 跨 平 台 的 特性 使 得 使 用 PHP. 架构 能 够 快速 、 高 效 地 开发 出 可 


移植 的 、 跨 平台 的 、 有 具有 强 
前 ， 需 要 在 操作 系统 上 搭建 一 个 适合 PHP 开发 的 ] 


frt: 第 二 种 是 完全 自己 安装 使 月 
库 ) 本 章 将 重点 介绍 这 两 种 PHP 


本 章 重点 介绍 如 下 知识 : 


© Apache 服务 器 的 安 
(7 PHP 的 安装 a 


大 功能 的 企业 级 Web 


应 用 程序 。 在 使 用 PHP 进行 网 站 开发 之 


操作 平台 。 使 用 Windows 自 带 的 IS 服务 
器 或 者 单独 安装 一 个 Apache 服务 器 都 可 以 实现 PHP. 的 解析 运行 ， 对 于 刚 入 门 的 新 手 ， 推 荐 
E PUP 发 环境 的 搭建 方法 : 第 一 种 是 简单 易 行 的 集成 开发 环境 ， 


C PHP 5.0 开发 环境 与 特性 
全 集成 环境 KAMPP 安装 和 使 用 


FERME 


(^7 MySQL 数据 库 的 安装 
(^7 MySQL 数据 库 的 管理 


2.1 | PHP 5.0 开发 环境 与 特性 


PHP 全 名 为 Personal Home Page， 是 最 普及 、 


法 混合 了 C, Java, Perl 以 及 PHP 自 创 的 新 语法 。 


如 XAMPP 开发 套 


H Apache (服务 器 -MySQL (数据 库 ) +MySQL (数据 
发 环境 的 配置 方法 。 


应 用 最 广泛 的 Web 


开发 语言 之 一 ， 其 语 


PHP 仅 具 有 开放 的 源 代码 和 多 种 数据 库 


的 支持 ， 而 且 支 持 跨 平台 的 操作 和 面向 对 象 的 编程 (这 是 完全 免费 的 )。 


新 版 本 PHP 5.0 的 一 些 新 特点 和 开 


214 开发 环境 配置 步骤 


PHP 的 运行 环境 需要 两 个 软件 的 支持 : 一 个 是 PHP 运行 的 Web 服务 器 Apache， 在 具体 安装 


发 环境 的 搭建 知识 。 


本 小 节 首先 介绍 最 


Apache 服务 器 之 前 ， 首 先 要 在 运行 的 系统 上 安装 支持 Apache 服务 器 的 Java 2 SDK; 男 一 个 是 


PHP 运行 时 需要 加 载 的 主要 软件 包 ， 该 软件 包 主 要 
PHP 页 面 的 函数 。 本 书 主要 介绍 Windows 操作 系统 下 使 用 Apache+PHP 配置 环境 的 方法 。 


PHP 开发 运行 环境 的 


C 置 步骤 如 图 2-1 所 示 。 


是 解释 执行 PHP 页 面 


的 脚本 程序 ， 如 解释 
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m 


E—2p. 安装 Apache 服务 器 


第 二 步 : 安装 配置 PHP 


第 三 步 : 安装 配置 MySQL 数据 库 


第 四 步 : 安装 PHPAdmin 管理 数据 库 


图 2-1 PHP 环境 配置 步骤 


由 于 上 面 的 配置 过 程 比较 复杂 ， 很 多 用 户 都 采用 直接 下 载 PHP 环境 安装 套件 的 方法 ， 


如 下 载 XAMPP 直接 一 次 性 将 PHP 环境 安装 到 位 。 
2.1.2 PHP 5.0 的 新 特性 


PHP 是 超 文本 预 处 理 语言 (Hypertext Preprocessor) WEE S, PF HTML PIA, 
的 语言 。 它 与 微软 公司 的 ASP THE, BEPERA AT HUN HTML 文档 的 脚本 语 
言 ， 但 其 语言 风格 又 类 似 于 C 语言 ， 现 在 被 很 多 的 网 站 编程 人 员 广 泛 应 用 。 

与 其 他 的 编程 语言 相 比 ，PHP 是 将 程序 嵌入 到 HTML 文档 中 去 执行 ， 执 行 效率 比 完全 


生成 HTML 标记 的 CGI 要 高 许多 ;与 同样 是 对 入 HTML 文档 的 朋 
PHP 在 服务 器 端 执行 ， 充 分 利用 了 服务 器 的 性 能 ，PHP 执行 引 


HAEA JavaScript 相 比 ， 


擎 还 会 将 用 户 经 常 访问 的 


PHP 程序 驻 留 在 内 存 中 ， 其 他 用 户 访问 这 个 程序 时 就 不 需要 重新 编译 程序 ， 只 需 直接 执行 


内 存 中 的 代码 即 可 ， 这 也 是 PHP 高 效率 的 体现 之 一 。 图 2-2 所 示 为 PHP 网 站 的 运行 模式 。 


PHP 还 具有 非常 强大 的 功能 ， 即 所 有 的 CGI 或 者 JavaScript 的 功 
持 几 乎 所 有 流行 的 数据 库 以 及 操作 系统 。 


机 房 网 关 


能 PHP 都 能 实现 ， 并 且 文 


Apache 服务 器 MySQL 数据 库 


图 2-2 PHP 网 站 的 运行 模式 
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PHP 最 初 只 是 简单 的 、 用 Ped 语言 编写 的 程序 ， 用 来 统计 自己 网 站 的 访问 量 。 后 来 义 用 
C 语言 重新 编写 PHP， 使 其 具有 访问 数据 库 等 功能 ， 并 在 1995 年 发 布 了 PHP 1.0. 2004 年 7 
月 13 日 PHP 5.0 正式 版 本 的 发 布 ， 标 志 着 一 个 全 新 的 PHP 时 代 的 到 来 。PHP 5.0 的 核心 是 第 
二 代 Zend 引擎， 并 引入 了 对 全 新 的 PECL 模块 的 支持 。 在 不 断 更 新 的 同时 ，PHP 5.0 依然 保 
留 对 旧 PHP 4.0 程序 的 兼容 。 随 着 MySQL 数据 库 的 发 展 ，PHP 5.0 还 绑 定 了 新 的 MySQLi 扩 - 
展 模块 ， 提 供 了 一 些 更 加 有 效 的 方法 和 实用 工具 用 于 处 理 数 据 库 操作 。PHP 5.0 添加 了 面向 对 
象 的 PDO (PHP Data Objects) 模块 ， 提 供 了 另外 一 种 数据 库 操 作 的 方案 ， 即 统一 数据 库 操作 
的 API。 另 外 ，PHP 5.0 中 还 改进 了 创建 动态 图 片 的 功能 ， 目 前 能 够 文 持 多 种 图 片 格式 ， 如 
PNG、GIF、TTIF、JPEG 等 。PHP 5.0 已 经 内 置 了 对 GD2 库 的 支持 ， 因 此 安装 GD2 库 〈 主 要 
指 UNIX 系统 中 ) 也 不 再 是 件 难事 ， 这 使 得 图 像 处 理 变 得 十 分 简单 和 高 效 。 

PHP 5.0 还 增加 了 只 有 成 熟 的 编程 语言 体系 结构 中 才 有 的 一 些 特性 ， 如 下 面 列 出 的 这 些 
特性 。 

CD 增加 的 面向 对 象 能 力 

PHP 5.0 的 最 大 特点 是 引入 了 面向 对 象 的 全 部 机 制 ， 并 且 保 留 了 向 下 的 兼容 性 。 程 序 员 
不 必 再 编写 缺乏 功能 性 的 类 ， 并 且 能 够 以 多 种 方法 实现 类 的 保护 。 另 外 ， 在 对 象 的 集成 等 方 
面 也 不 再 存在 问题 。 使 用 PHP 5.0 引进 的 类 型 提示 和 异常 处 理 机 制 ， 能 更 有 效 地 处 理 异常 情 
况 和 避免 错误 的 发 生 。PHP 5.0 增加 了 很 多 功能 ， 例 如 显 式 构造 函数 和 析 构 函数 、 对 象 克 
隆 、 类 抽象 、 变 量 作用 域 和 接口 等 。 

(2) try/catch 异常 处 理 

从 PHP 5.0 开始 文 持 异常 处 理 。 在 许多 语言 《如 C, CH, Python 和 Java 等 ) 中 ， 异 
常 处 理 长 期 以 来 都 是 错误 管理 方面 的 核心 ， 并 且 为 建立 标准 化 的 错误 报告 逻辑 提供 了 一 种 绝 
佳 的 方法 。 

(3) 字符 串 处 理 

之 前 版 本 的 PHP 默认 将 字符 串 看 做 数组 ， 这 也 反映 了 PHP 原先 的 数据 类 型 观点 不 够 严 
密 。 这 种 策略 在 5.0 版 本 中 有 所 调整 ， 即 引入 了 一 种 专门 的 字符 串 偏 移 量 〈offset) 语法 ， 
而 以 前 的 方法 已 经 被 淘汰 。 

(4) XML 和 Web 服务 支持 

现在 的 XML 支持 建立 在 libxml2 库 的 基础 上 ， 并 引入 了 一 个 很 新 并 且 非 常 有 前 途 的 扩 
展 包 来 解析 和 处 理 XML, HI SimpleXML 。 此 外 ，PHP 5.0 还 支持 SOAP 扩展 。 

C5) 对 SQLite 的 内 置 支持 

PHP 5.0 为 功能 强大 、 简 洁 的 SQLite 数据 库 服务 器 提供 了 支持 。 如 果 开 发 人 员 需 要 使 用 
些 只 有 重量 级 数据 库 产品 中 才 有 的 特性 ， 同 时 又 不 希望 带 来 相应 的 管理 开销 ， 这 时 
SQLite 则 是 一 个 很 好 的 解决 方案 。 


2.2 | 集成 环境 XAMPP 的 安装 和 使 用 


XAMPP 〈Apache+MySQL+PHP+PERL ) 是 一 个 功能 强大 的 、 建 XAMPP 软件 站 的 集 
成 软件 包 。 这 个 软件 包 原 来 的 名 字 是 LAMPP， 但 是 为 了 避免 误解 ， 最 新 的 几 个 版 本 就 改名 
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为 XAMPP 了 。 它 可 以 在 Windows. Linux. Mac OSX, Solaris 操作 系统 下 安装 人 使用， 支持 
英文 、 简 体 中 文 、 繁 体 中 文 、 埋 文 、 俄 文 、 日 文 等 多 种 语言 。 


224 XAMPP 集成 套件 的 下 载 


XAMPP 是 笔者 用 到 现在 为 止 感觉 最 好 用 的 一 款 Apache+MySQL+PHP 套件 ， 它 同时 文 持 
Zend Optimizer 和 插件 安装 ， 目 前 XAMPP 的 最 新 版 本 是 1.8.1。 下 载 的 方法 如 下 : 

1) 打开 IE 浏览 器 ， 输 入 官方 网 址 “http:/www.apachefriends.org/”， 按 下 回 车 键 后 ， 
再 单 击 “ 简 体 中 文 ”切换 到 中 文 版 本 页 面 ， 再 单 击 导航 栏 上 的 xAMPP 贺 下 载 按钮 ， 进 入 
到 下 载 页 面 ， 如 图 2-3 所 示 。 


xampp Microsoft Internet Explorer 
文件 J) o ZTV VEO IAT) Who 
Ost-O-a336 mr $e o Aaea 


BAE D) (E) he:y/r apachefri ends. er t/zh. ayxwmey htel 


Zi 适用 于 Linux 的 XAMPP C7 


通用 于 Linux RENET € 已 在 Ubuntu. SuSE, RedHat, Mandrake 和 Debian FINA 
Wt). Npa : Apache, MySQL, PHP & PEAR, Perl, ProFTPD, phpMyAdmin, OpenSSL ,GD, 
Freetype2, libjpeg, libpng, odbm, zib, expat, Sablotron, libxml, Ming, Webalizer, pdf 
dass, ncurses, mod, perl, FreeTDS, gettext, mcrypt, mhash, eAccelerator, SQLite 和 IMAP 
C-Client, 


Ei 适用 于 Windows 的 "b [7] 


通用 于 windows 2000. XP. aJ 798. EETA : Apache, MySQL. PHP + 
PEAR, Perl, mod pho, mod perl, mod ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury 
Mai Transport System, Ming, JpGraph, FileZilla FTP Server, merypt, eAccelerator, SQUte 
T WEB-DAV + mod, auth mysql. 


Zi 适用 于 MacOS X (fi XAMPP C7 


MAF MacOS X 的 发 行 版 包括 : Apache. MySQL. PHP & PEAR, SQLite. Perl, ProFTPO, 
phpMyAdmin, OpenSSL, GD, Freetype2, libjpeg, libong, zio, Ming, Webalizer, mod peri, 


Li 适用 于 Solaris 的 XAMPP 77 
通用 于 Solaris 的 发 行 版 ( 在 Solaris 8 FRFFERFAR, & Solaris 9 FIESTA f$ : 


Apache. MySQL. PHP & PEAR, Perl, ProFTPO, phpMyAdmin, OpenSSL, Freetype?2, libjpeg, 
Wbpng, zlib, expat, Ming, Webalizer, pdf dass. 


图 2-3 进入 下 载 页 面 


2) 单 击 页 面 上 的 “适用 于 Windows 的 XAMPP ”文字 链接 ， 进 入 “XAMPP for 
Windows” 下 载 页 面 ， 如 图 2-4 所 示 。 


pache friends - xanpp 的 windows 版 - Microsoft Internet Explorer 
xo) £o EEV RN IAT) Wo 
QsB-O-i3 6 Pme ter e 2-3 (3 (d 

A) hou / nne apachefri ends. or c/ 1h en, nang wi ndors. htol170T 


deutsch * engish * francais * maliano * portugués (brasil) - Bal - wot - Net 
TAPACHE A, 
FRIENDS. 


2 


XAMPP for Windows 


XAMPP 1.8.1 已 发 各} 
mai: 


* Apache 2.4.3 | 
© MySQL 5.5.27 

® PHP 54.7 

© phpMyAdmin 3.5.2.2 

© FileZila FTP Server 0.9.41 


€ Tomcat 7.0.30 (with mod proxy ajp as connector) 
© Strawberry Perl 5.15.1.1 Portable 


图 2-4 Windows Jit] FEW TR 
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3) 单 击 选 择 “Installer” 按 钮 ， 下 载 最 新 XAMPP v1.8.1 (99MB) 安 装 包 ， 如 图 


Win 
99 MB 安装 包 
MOS checksum: 20067c31723/483c7106443463b4dí4 c 


184 MB ZIP anu 
ecksumi 924e9cdc0/c49984e0c49162a8601:18 


84 MB e Sue 
ck tum: 46266bc30909$620092209279509004217 


very reduced v of XAMPP vith Apache 2.4.2, 
4.7, phony RS LOTE 
ontrol Panel 


68 MB -— RAR act 


84 e: zip T 


图 2-5 下 载 最 新 版 的 安装 包 


2-5 所 示 。 


XAMPP 是 完全 免费 的 ， 并 且 遵 循 GNU 通用 公众 许可 。XAMPP 最 新 包含 的 功能 模块 


如 下 : 

Apache 2.4.2 

MySQL5.5.27 

PHP 5.4.7 

phpMyAdmin 3.5.2.2 

FileZilla FTP Server 0.9.41 

Tomcat 7.0.30 (with mod proxy ajp as connector) 
Strawberry Perl 5.16.0.1 Portable 

XAMPP Control Panel 3.1.0 (from hackattack142) 


2.22. XAMPP 的 安装 测试 过 程 


XAMPP 的 安装 过 程 很 简单 ， 解 压 包 等 就 更 简单 一 点 。 这 里 以 Windows 7 操作 系统 为 


例 ， 安 装 XAMPP 步骤 如 下 ; 


1) 安装 时 最 好 放置 到 D 盘 ， 不 建议 放 到 系统 盘 ， 因 为 早期 的 KAMPP 版 本 默认 安装 的 
Program files 文件 夹 在 Vista、Windows 7 系统 中 可 能 需要 修改 写 入 权限 。 双 击 下 载 的 文件 安 


装 包 ， 弹 出 图 2-6 所 示 的 安装 注意 事项 提示 。 


Important! Because an activated User Account Control (UAC) on your 
sytem some functions of XAMPP are possibly restricted. With UAC please 
avoid to install XAMPP to C:\Program Files (missing write permissions). 
Or deactivate UAC with msconfig after this setup. 


图 2-6 开始 安装 
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LZ 


20 如 果 是 第 一 次 安装 ， 或 者 系统 上 没有 安装 Microsoft Visual C++2008 组 件 ， 这 时 会 
现 提 示 先 下 载 该 组 件 的 对 话 框 ， 如 图 2-7 所 示 。 


Warning: XAMPP (PHP) cannot work without the Microsoft Visual C++ 
2008 Redistributable Package. Now open the Microsoft page for this 


download? 


[a~ | 
图 2-7 提示 下 载 组 人 
3) 这 里 是 第 一 次 安装 ， 因 此 单 击 “是 ”按钮 ， 自 动 打 开 浏 览 器 并 链接 到 下 载 页 面 ， 选 

择 中 文 (简体 ) 版 ， 再 单 击 “下 载 ” 按 钮 ， 如 图 2-8 所 示 。 


uw ott we cs 
1 (9 X Qfie- gum MM 4 Djk 9- 29 
DWCUTIJUTIULCUIIC TI QCcRUUc (UU 


H 


CD 


快速 链接 Microsoft Visual C++ 2008 SP1 Redistributable 
NS Package (x86) £73 Visual C+ + 库 安 装 必要 的 运行 时 组 
ERR 件 ， 使 用 户 能 够 在 未 安装 Visual C++ 2008 SP1 的 计算 机 
* 说 明 上 运行 使 用 Visual C++ SP1 开发 的 应 用 程序 。 
快速 详细 信息 
Microsoft 版 本 : Sp1 发 布 日 期 : 2008/9/16 
Store 更 改 语言 : (pxo E) 
mmeo gaa m 
游戏 、 配 件 等 
vcredist x86.exe 39 MB 
* án: HRA B cce. 03 um - 


图 2-8 下 载 相应 的 组 件 


T 


4) 下 载 完 成 后 先 安 装 下 载 的 组 件 ， 完 成 安装 之 后 切换 回 KAMPP 的 安装 步骤 ， 然 后 根 
据 提 示 开 始 安装 XAMPP 组 件 ， 如 图 2-9 所 示 。 


Welcome to the XAMPP 1.8.1 Setup 
Wizard 


This wizard wil guide you through the installation of XAMPP 
1.8.1. 


Itis recommended that you dose all other applications 
before starting Setup. This will make it possible to update 
relevant system files without having to reboot your 
Computer. 


Cid Next to continue. 


图 2-9 始 安装 界 国 
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5) 单 击 “Next (下 一 步 )” 按 钮 ， 打 开 “Choose Components (选择 安装 组 件 )” 界 面 
这 里 保留 默认 值 ， 即 勾 选 所 有 的 组 件 进行 安装 ， 如 图 2-10 所 示 。 


~ 


Eile 


Choose Components 一 : 
Choose which features of XAMPP 1.8.1 you want to install. 


Check the components you want to install and uncheck the components you don't want to 
install. Click Next to continue. 


Select components to install: 


Space required: 668.8MB 


Nullsoft Install System v2.46 


图 2-10 选择 安装 的 组 件 


6) Ai “Next (下 一 步 )” 按 钮 ， 打 开 “Choose Install Location (选择 安装 路 徐 )” 界 
面 ， 这 里 选择 在 D 盘 下 安装 ， 设 置 如 图 2-11 所 示 。 


Dano a a 0g 


Choose Install Location 
Choose the folder in which to install XAMPP 1.8.1. 


Setup wil install XAMPP 1.8. 1in the following folder. To install in a different folder, dick 
Browse and select another folder. Click Install to start the installation. 


Space required: 668.8MB 
Space avallable: 26.9GB. 


Nullsoft Install System v2.46 


图 2-11 选择 安装 路 径 


Vista 以 上 操作 系统 的 用 户 请 注意 : 由 于 对 Vista. 默认 安装 的 C:\program files 文件 夹 没 
有 足够 的 写 入 权限 ， 推 荐 为 KAMPP 安装 创建 新 的 路 径 ， 如 DAXAMPP 或 D:myfolden 
XAMPP。 

D 设置 完 路 径 之 后 ， 再 单 击 “Install (安装 )” 按 钮 ， 组 件 即 开始 安装 到 计算 机 上 。 安 
装 的 组 件 大 小 近 700MB， 需 要 了 耐心 等 上 几 分 钟 ， 安 装 的 过 程 提 示 如 图 2-12 所 示 。 

8) 安装 完成 后 ， 会 弹出 COMMAND 设置 窗口 ， 进 行文 件 的 最 后 确认 (图 2-13) ， 这 
里 不 需要 进行 任何 操作 (以 前 的 版 本 则 需要 根据 提示 进行 一 些 设置 )。 
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[z] XAMPP 1.8.1 win32 


Installing 
Please wait whie XAMPP 1.8.1 is being installed. 


Extract: zh.php 

Output folder: D: bampp htdocs Vampp navis 
Extract: 01. phpmyadmin. tools 

Extract: 01, phomyadmin. tools usb 

Extract: 02 filezila.tools 

Extract: 02, mail. tooks-usb 

Extract: 03. webalizer .tools 

Extract: 04, mall.tools 

Extract: perlexamples. peri 

Extract: perlexamples.peri-usb 


图 2-12 安装 过 程 提示 


® Drampp\php\phpexe 


"2STILERSEITIUSERRRITERSSRUEIERERERE 
A KAMPP setup win32 


Car nn 《vebnasterg »nline.de £] 
"IEEHSEIIREHREEREETEESETIITTEETETUERRSERIRITERERRITENSEDRNESEEREDIEESERÀ 


图 2-13 DOS 窗口 下 的 配置 


9) 配置 完毕 后 弹出 完成 安装 的 界面 ， 如 图 2-14 所 示 。 


[E] XAMPP 1.8.1 win32 (uo m m 


Completing the XAMPP 1.8.1 Setup 
Wizard 
XAMPP 1.8. 1 has been installed on your computer. 


Click Finish to dose this wizard. 


c Jua [ce 


图 2-14 完成 安装 界面 


10) 到 这 里 XAMPP 就 安装 完成 了 。 如 果 出 现 XAMPP 安装 失败 ， 请 先 在 安装 一 半 的 
XAMPP Hot P3 X fF uninstall xampp.bat 并 执行 一 次 清理 ， 然 后 再 重新 安装 。 单 击 
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“Finish (完成 )” 按 钮 ， 弹 出 是 否 启动 KAMPP 控制 面板 对 话 框 ， 如 图 2-15 所 示 。 


You can manage all the servers (services) with the XAMPP Control Panel. 


Do you want to start the Control Panel now? 


Cx) Cm 


图 2-15 是 否 启 动 XAMPP 控制 面板 对 话 框 


11) 下 面 我 们 来 看 一 下 XAMPP 的 控制 面板 ， 单 击 面板 上 各 软件 组 件 后 面 的 “Star” 按 
钮 ， 弹 出 “Windows 安全 警报 ”对 话 框 ， 选 择 “ 人 允许 访问 ”按钮 ， 如 图 2-16 所 示 。 


Yindors 防火 墙 已 组 止 所 有 公用 了 网络 和 专用 网 络 上 的 "rsq14 MAEI e 
a ao) E 
Rean +a 
agw D weppleysqibinVeysold exe 
|| ci erii trtfue EA 
Cow mS. DENTEURSLT FPE ao 


E) im Ion ceterae GEB. BTZRIEATEEHtRU 


图 2-16 设置 允许 访问 

plies MYRER oT nd A 
图 中 可 以 看 到 XAMPP 的 一 些 基 本 控制 功能 。 注 意 : 不 建议 把 这 些 功 能 注册 为 服务 (开机 启 
动 )， 每 次 使 用 的 时 候 运 行 软件 就 可 以 了 (桌面 上 已 经 有 图 标 ，， 这 样 在 不 使 用 XAMPP 时 
更 节省 资源 。 


园 XAMPP Control Panel v3.1.0 3.1.0 


DISCI: 


ne 
Atteapting to start Filelilla app... 
Status change detected: running] 


[a 
39:51 [Tomcat] Atteapting to start Tomcat app.. 


图 2-17 启动 组 件 服务 
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13) 启动 成 功 之 后 打开 TE. 浏览 


， 输 入 服务 器 的 默认 IP 地 址 “127.0.0.1”， 


之 后 出 现 图 2-18 所 示 的 欢迎 界面 ， 说 明 已 经 安装 成 功 并 且 可 以 开始 使 用 。 


pum 
^ 


S enam cp s o cap IAD we Cw. - dlx 


. Ce 
回 XAMPP für Windows .............. 


这 里 要 特别 说 明 的 是 : 


ULT 


图 2-18 欢迎 界面 


按 回 车 键 


对 初学 者 而 言 ， 往 往 会 不 知道 开发 后 的 PHP 网 站 程序 要 放 在 哪里 。 其 实 很 简单 ， 只 要 
将 整个 网 站 程序 放 在 htdocs 文件 夹 底下 就 可 以 进行 访问 了 ， 如 图 2-19 所 示 。 同 样 要 将 数据 
库 文 件 放 在 Mysqldate 文件 夹 底下 ， 同 时 数据 库 的 连接 用 户 名 要 为 root, ifs 


CXAMPP 默认 安装 下 的 用 户 名 和 密码 )。 


- x 
CIC OE Heo sie; DD » xampp » htdocs ， TO CI] | 


2.2.3 XAMPP 基本 使 用 方法 


Em 


2013/3/20 10:32 
2013/3/20 10:32 
2013/3/20 10:32 
2012/4/16 23:30 
2012/4/16 23:30 
2012/4/16 23:30 
2012/4/16 23:30 
2012/4/16 2330 


2012/4/16 23:30 
2012/4/16 23:30 
2012/4/16 2330 


图 2-19 网 站 所 放置 的 位 置 


XAMPP 安装 完成 之 后 进行 使 用 的 方法 如 下 : 
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1) XAMPP 的 局 动 路 径 : xamppwampp-control.exe. 
2) XAMPP 服务 的 启动 和 停止 脚本 路 径 。 
启动 Apache 和 MySQL: xamppWxampp start.exe 


ZW 
EY 


停止 Apache 和 MySQL: xamppxampp stop.exe 


启动 Apache: xamppapache start.bat 
f&i1E Apache: xampp apache stop.bat 
启动 MySQL: xampp\mysql start.bat 
停止 MySQL: xampp\mysql stop.bat 

启动 Mercury 邮件 服务 器 : xamppWnercury. start.bat 

设置 FileZilla FTP 服务 器 : xamppMilezilla setup.bat 

启动 FileZilla FTP 服务 器 : xamppMilezilla start.bat 

停止 FileZilla FTP 服务 器 : xamppMilezilla stop.bat 

3) XAMPP 的 配置 文件 路 径 。 

Apache 基本 配置 : xampp\apache\confihttpd.conf 

Apache SSL: xampp\apache\confissl.conf 

Apache Perl. 〈 仅 限 插件 ): xampp\apache\conf\perl.conf 
Apache Tomcat〈 仅 限 插件 ): xampp\apache\conf\java.conf 
Apache Python 〈 仅 限 插件 ): xampp\apache\conf\python.conf 


PHP: xampp php php.ini 


MySQL: xampp mysql bin my.ini 

phpMyAdmin: xamppwhpMyAdmin'config.inc.php 

FileZilla FTP 服务 器 : xamppWileZillaFTP FileZilla Server.xml 

Mercury 邮件 服务 器 基本 配置 : xamppWercuryMail MERCURY.INI 

Sendmail: xampp\sendmail\sendmail.ini 

4) XAMPP 的 其 他 常用 路 径 。 

网 站 根 目 录 的 默认 路 径 ， xamppMtdocs 

MySQL 数据 库 默 认 路 径 : xamppWnysql data 

5) 日 常 使 用 只 需要 使 用 XAMPP 的 控制 面板 即 可 ， 可 以 随时 控制 Apache. PHP. 
MySQL 以 及 FTP 服务 的 启动 和 终止 。 

6) Mi XAMPP 的 默认 密码 。 

€ MySQL: 

User: root Password: (^r 

@ FileZilla FTP: 


User: newuser Password: wampp 


User: anonymous Password: some(a)mail.net 
€ Mercury: 

Postmaster: postmaster (postmaster(a)localhost) 
Administrator: Admin (admin@localhost) 
TestUser: newuser Password: wampp 
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€ WEBDAV: 
User: wampp Password: xampp 
参照 上 文 将 XAMPP 安装 和 配置 完成 后 ， 就 可 以 安装 Dreamweaver 等 网 页 程序 编辑 软 


件 ， 进 行 网 页 


编程 测试 了 。 


2.3 | Apache 服务 器 的 安装 与 操作 


Jede 


接 从 第 3 草 开 


AA. Aden 


2.9.4 Apach 


自从 PHP 发 布 之 后 


因此 它 一 般 在 


Apache 的 运行 分 为 启动 阶段 和 运行 阶段 。 在 启动 阶段 ，Apache 以 特权 


绍 了 简单 易 操作 的 XAMPP 组 件 的 安装 和 使 用 ， 入 门 级 的 读者 可 以 在 安装 后 直 
如 果 想 进一步 了 解 PHP 平台 
Apache 服务 器 的 安装 和 操作 。 


台 学 起 ， 


€ 服务 器 知识 


Ph 运行， 
任务 运行 ， 在 UNIX 系统 中 为 守候 进程 
为 服务 (Service) 。 由 于 Apache 服务 器 的 启动 阶段 上 


的 搭建 可 以 认真 学 一 下 本 章 以 下 几 节 的 


， 推 出 了 各 式 各 样 的 PHP 引擎 ， 最 为 经 典 的 配置 就 是 使 用 Apache 
服务 器 。Apache 是 一 种 开源 的 HITP 服务 器 软件 ， 可 以 在 包括 UNIX、Linux 以 及 Windows 
在 内 的 大 多 数 主流 计算 机 操作 系统 
用 。Apache 作为 常 驻 的 后 人 台 
Windows 系统 ! 


由 于 其 支持 多 平台 和 良好 的 安全 性 而 被 广泛 使 


E (Daemon) ， 在 
较 耗 费时 间 和 资源 ， 


"bx 


操作 系统 启动 时 被 启动 并 


D, HEITER 


处 理 网 络 中 


(也 可 能 是 模块 或 脚本 ) 而 导致 严重 的 系统 安全 漏洞 。 例 如 ， 微 软 公司 的 HS 就 兽 遭 
ERI (Code Red) ”和 “ 尼 姆 达 (Nimda) ” 
的 主 配置 文件 通常 为 httpd.conf。 由 于 这 种 命名 方式 为 一 般 惯例 ， 并 非 强制 要 
此 需要 提供 rpm 或 者 deb 包 的 
制 。 另 外 ，httpd.conf 文件 可 能 是 单一 文件 ， 也 可 
配置 文件 的 多 个 文件 的 集合 。 


Apache 
名 机 


析 ， 该 文件 


配置 文件 、 加 载 模块 和 初始 化 一 
库 链 接 ) 等 操作 。 处 于 运行 阶段 时 ，Apache 放弃 特权 


运行 。 


1P root 局 
系统 资源 〈 如 日 志文 件 、 共 享 内 存 段 、 数 据 
9 户 级 别 ， 使 用 非特 权 用 户 来 接收 和 


i5 


] 户 的 服务 请 求 。 这 种 基本 安全 机 制 可 以 阻止 Apache | 


于 一 个 简单 的 软件 错误 


已 人 
Ho 


略 不 计 。 


2.3.2 Apache 服务 器 的 下 载 


Apache 软件 和 其 他 免费 软件 一 相 


A a 


Au 


httpd.conf 文件 是 一 个 文本 
、 容 器 和 注释 组 成 。 配 置 文件 内 允许 有 


受 “ 红 


Af SIE 2m. 
^q U^ 


代码 的 溢出 攻击 。 


三 方 ， 所 以 Apache 的 发 行 版 本 可 能 使 用 不 同 的 命 
能 是 通过 使 用 Include 指令 包含 不 同 

文件 ， 在 系统 启动 时 被 逐 行 解 
行 和 空格 ， 它 们 在 解析 时 被 忽 


FE， 可 以 直接 到 Apache 的 官方 网 站 上 进行 下 载 ， 下 载 的 


地 址 是 http://httpd.apache.org/download.cgi。 下 载 Apache 最 新 版 本 的 步骤 如 下 : 
1) 打开 下 浏览 器 ， 在 网 址 栏 输入 http://httpd.apache.org/download.cgi 链接 至 Apache 的 


官方 网 站 ， 如 


2) 在 这 个 页 面 中 有 许多 下 载 选项 ， 昌 
文字 ， 下 载 Apache 的 自动 安装 程序 ， 如 
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图 2-20 所 示 。 


击 选择 页 面 上 的 “httpd-2.2.22-win32-x86-no_ssl.msi” 


图 2-21 所 示 。 
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/ Dovnload -~ Tho Apache ETTP Sorver Project - Windows Intornet Exploror 
go- [N bito betyd epoche. ore/ dornlond cci POECIE Cr 
XAU sp FEV AREG IAV hy 

W Bornlsad - The Apache WITP Server Project 


L 


k Apache 
一 HTTP SERVER PROJECT 


Use the links below to download the Apache HTTP Server from onc of our mirrors. You mast verify the integrity of tbe downloaded 
fics using signatures download-d from our main distribution directory 


Only current recommended releases arc available on the main distribution site and its mirrors. Older releases, including thc 1 3 family of 
releases, arc available from the archive download site. 


Stable Release - Latest Version: 
< 242 (released 2012-04-17) 
Stable Release - 2.2 Brasch 
* 2222 (released 2012-01-31) 
Legacy Rekase 
* 2.0 64 (released 2010-10-19) 
H you arc downloading the Win32 distribution, please read these important notes 
DIDA ANE END M MSS (i 
The currently selected mirror is http://labs.remren.com/apache-mirror/. lf you encounter a problem with this mirror, 


please select another mirror. If all marors are failing, there are backup mirrors (at the end of the mirrors Est) that should 
be available. 


图 2-20 ”打开 的 官方 网 站 


Č Dovnload — The Apache ETIP Server Projec 
G- ` pete ore 

rep SEY sco ARRU IRAV Udv 
e N Borzlosd - The Apache KITE Server Project 


Apache HTTP Server 2.2.22 (httpd) 2012-01-31 
The Apache HTTP Server Project is pleased to announce the release of Apache HTTP Server (httpd) version 2.2.22. 
For details see the Ofcial Asnouncement and the CHANGES 2.2 or condensed CHANGES. 2.2.22 ists 


Add-in modules for Apache 2.0 are not compatible with Apache 2.2. If you are running third party add-in modhiles, you 
must obtain modules compiled or updated for Apache 2.2 from that third party, before vou attempt to upgrade from 
these previous versions. Modules complied for Apache 2.2 should continue to work for all 2.2 x releases 


* Unix Source: bttpd-2 2 22 tar gz [PGP] [MD5] [SHA1] 
222 tar bz? (PGP] [MD5] [SHA 
2-win32 src zip [PGP] [MH] 

* Win32 Binary without crypto (no mod ssl (MSI Installer): 

[SHA1] 1 
+ Win32 Binary incloding OpenSSL 0.9.8t (MSI Installer): httpd-2 2 22-win32-x86-openssl-0 9 St msi [PGP] 

MD5] [SHA 1 
* NetWase Binary. bepd 2.2 22-netwase sp [PGP] [MD5] [SHA1] 
* Security and official patches 
* Other files 


Apache HTTP Server 2.0.64 is also available 2010-10-19| 


Apache 2.0.64 is the legacy stable version of the 2.0 series, and is recommended over any previous 2.0 release. This 
release fixes a few potential security vulnerabdites. 


For details see the Official Announcement and the CHANGES. 2.0 and CHANGES 20.64 lists. 


Apache 2.0 add-in modules arc not compatible with Apache 2.2 modules. If you are running third party add-in modules, 
vou will need to obtain modules compiled for or compatible with Apache 2.0 from that third oartv. before vou artemot to 


图 2-21 选择 相应 的 文件 下 载 

下 载 说 明 : 

本 书 所 下 载 的 是 编写 此 书 时 的 最 新 版 本 。 由 于 Apache 软件 经 常 更 新 版 本 ， 读 者 可 能 会 
下 载 到 不 同 的 最 新 版 本 ， 但 是 这 不 会 影响 到 后 面 的 操作 与 设置 。 
2.3.3 Apache 服务 器 的 安装 


完成 下 载 Apache 的 安装 程序 后 ， 双 击 下 载 的 可 执行 安装 文件 〈 在 本 书 的 原 素材 资源 中 
的 phpsoft 文件 夹 下 也 有 下 载 的 原文 件 )， 如 图 2-22 所 示 。 
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L phpsoft 


xq REV EEV HRW IAV Wb 
Qm-O AP» Cem |T 


IRE M) [C D boss ft 


文件 和 文件 卖 任务 
w) Easra 
gy sare 
A 复制 这 个 文件 
O Tine re 
Ə HOTIE 


x hurt 


AM: Finders Installer PEG fFF: Apache Software Foundation HF: Install 5.41 


PELT 


2-22 下载 的 Apache 安装 文件 包 
安装 的 步骤 如 下 ; 


项 


y 


1) 双击 安装 文件 包 ，Apache 安装 程序 会 提示 将 安装 Apache 服务 器 ， 并 
如 图 2-23 所 示 。 


È Apache HTTP Server 2.2 - Installation Fizard 


Welcome to the Installation Wizard for 
Apache HTTP Server 2.2.22 


The Installation Wizard will install Apache HTTP Server 2.2.22 
0n your computer. To continue, dick Next. 


L 
> 


AC 


pu 
et nn 


ANAL 


ff 


WARNING: This program is protected by copyright law and 
international treaties. 


-— | 
f 
mx 


图 2-23 开始 安装 
20 mublomete | 按钮 ， 继 续 安装 程序 。 请 选择 “Iaccept the terms in the license agreement 
(我 接受 条 款 上 告知 的 内 容 )” 同 意 合约 的 授权 ， 进 行 继续 安装 ， 如 图 2-24 所 示 。 


i Apache HITP Server 2.2 - Installation Wizard 
License Agreement 


ase read the folowing license agreement carefully. 


License 
Version 2.0, January 2004 


TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions. 


"License" shall mean the terms and conditions for use, reproduction, and 
distribution as defined by Sections 1 through 9 of this document. 


(OT accept the terms in the license agreement! 
(O1 do not accept the terms in the license agreement 
InstaliSheld 


[e Le] Lom 


图 2-24 同意 安装 
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30 yl ee | 校 钮 ， 继 续 进 行 安装 程序 ， 打 开 “Read This First (预先 读 取 下 面 内 
容 )” 界 面 ， 如 图 2-25 所 示 。 


但 Apache HITP Server 2.2 Installation Fizard 


Read This First 
Read this Before Running Apache on Windows. 


The Apache HTTP Server is a powerful and flexible HTTP/1.1 compliant web server. 
Originally designed as a replacement for the NCSA HTTP Server, it has grown to be 
ie most popular web server on the Internet. As a project of the Apache Software 
Foundation, the developers aim to collaboratively develop and maintain a robust, 
commercial-grade, standards-based server with freely available source code. 


The Latest Version 
Details of the latest version can be found on the Apache HTTP server project page 


图 2-25 打开 预览 内 容 界面 


4) 在 预览 内 容 界面 中 主要 是 介绍 Apache HTTP Server (Apache 网 页 服务 器 ) 的 一 些 基 
础 知识 ， 初 次 使 用 的 读者 可 以 认真 地 去 了 解 一 下 ， 以 方便 进一步 的 使 用 。 单 击 攻 ss d 
钮 ， 打 开 “Server Information〈 服 务 器 信息 )” 界 面 ， 这 里 要 自行 设 定 服务 器 和 域名 名 称 ， 
并 输入 管理 者 的 联系 邮箱 ， 如 图 2-26 所 示 。 

5) RERA Myle | 按钮 ， 继 续 进 行 下 一 步 的 安装 。 打 开 “Setup Type 
(安装 类 型 )” 界 面 ， 这 里 有 Typical (典型 ) 和 Custom (HEX) 安装 两 个 单 选项 ， 如 图 
2-27 所 示 。 


E 


í8 Apache HIIP Server 2.2 - Installation Wizard X í8 Apache HTTP Server 2.2 - Installation Wizard 


Server Information Setup Type 
Please enter your server's information. Choose the setup type that best suits your needs. 


Network Domain (e.g. somenet.com) Please select a setup type. 


O Typical 
Server Name (e.g. www.somenet.com): Typical program features wil be installed. (Headers and Libraries 
[phoserver for compáng modules wil not be installed.) 


Administrator's Email Address (e.g. webmaster &somenet. com): 


[635601486«a.com Ocustom 


Choose which program features you want installed and where they 
Install Apache HTTP Server 2.2 programs and shortcuts for: Recommended for advanced users. 

© for Al Users, on Port 80, as a Service — Recommended. 

(O only for the Current User, on Port 8080, when started Manually. 


InstafiSheld 


图 2-26 “Server Information 〈 服 务 器 信息 ) ”界面 图 2-27 “Setup Type( 安 装 类 型 ) ”界面 


6) 这 里 单 击 “Custom 〈 自 定义 )” 单 选 按钮 ， 再 单 击 情 ME 按钮， 打开 “Custom 
Setup〈 自 定义 安装 内 容 )” 界 面 ， 如 图 2-28 所 示 。 这 里 将 选择 所 有 的 内 容 进 行 安 装 ， 以 满 
足 后 面 PHP 程序 开发 应 用 的 需要 。 由 于 Apache 预 设 的 路 径 有 点 长 ， 为 了 方便 起 见 ， 将 安装 
路 径 改 成 CNApache 。 单 击 “ Change (改变 )” 按 钮 ， 将 服务 器 的 安装 路 径 设 置 为 
C:\Apache\。 


41 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


(8 Apache HTTP Server 2.2 — Installation Wizard 


Custom Setup 
Select the program features you want installed. 


Click on an icon in the list below to change how a feature is installed. 


Feature Descripbon 
The Apache HTTP Web Server 
Verson 2.2 


s BJ ttu CERES 


This feature requires OKB on 
your hard drive. It has 3of 3 
selected. The 


Come )J( s jJ( sme ) me» J( ce ) 


图 2-28 “Custom Setup( 自 定义 安装 内 容 ) ”界面 


7) J&di mets gol, +J "Ready to Install the Program (准备 安装 )” 界 面 ， 如 图 2-29 
所 示 。 


n-] Apache HTTP Server 2.2 - Installation Vizard 
Ready to Install the Program 
The wizard is ready to begin installation. 


Click Install to begin the installation. 
If you want to review or change any of your installation settings, dick Back. Click Cancel to 
exit the wizard. 


图 2-29 准备 安装 界面 
8) 单 击 世 ES 按钮， 开始 进行 具体 的 安装 。 安 装 的 过 程 如 图 2-30 所 示 。 


(B Apache HIIP Server 2.2 - Installation Wizard aE] 


Installing Apache HTTP Server 2.2.22 
The program features you selected are being instaled. 


Please wait while the Installation Wizard installs Apache HTTP Server 
2.2.22. This may take several minutes. 


Status: 
Copying new fles 


图 2-30 ”安装 过 程 
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9) 安装 完成 后 ， 单 填 [CEJ 按钮， 如 图 2-31 所 示 。 


i8 Apache HITP Server 2.2 — Installation Fizard 


: Installation Wizard Completed 
D 


0 


The Installation Wizard has sce kaeo ak a aid 
Server 2.2.22. Click Finish to 


图 2-31 完成 安装 


至 此 ，Apache 服务 器 的 安装 就 完成 了 。 在 安装 的 时 候 要 注意 的 是 : 使 用 的 操作 系统 端 
80 不 能 被 占用 ， 如 果 计 算 机 上 默认 安装 了 IIS 就 说 明 已 经 占用 了 端口 80， 需 要 将 其 禁 
后 方 可 安装 成 功 。 


2.34. Apache 服务 器 的 操作 


安装 完成 Apache 服务 器 后 ， 首 先 要 测试 一 下 前 面 的 安装 与 设 定 是 否 成 功 。 由 于 是 在 本 
机 计算 机 安装 Apache 服务 器 ， 因 此 它 的 HTTP 地 址 的 预 设 路 径 是 http://localhost。 

首先 打开 E 浏览 器 ， 在 网 址 栏 输入 http:Wlocalhost， 如 果 能 顺利 开启 图 2-32 所 示 的 页 
面 ， 就 表示 Apache 服务 器 的 服务 启动 成 功 了 。 


(C hnttp://localhost/ — Windows Internet Explorer 

GO: [E stp: //1ocalhost PREJE EET 
xq REO FEV ERRO IAV HY 

w Ø http: //localhost/ EN 


It works! 


图 2-32 测试 成 功 页 面 


Apache 服务 器 的 服务 ， 对 PHP 网 页 的 执行 有 很 重要 的 作用 ， 因 此 ， 接 着 我 们 要 来 说 明 
Apache 服务 器 的 设 定 与 操作 。 


1. Apache 服务 器 的 启动 
在 Apache 服务 器 安装 完成 的 页 面 上 ， 如 果 已 经 勺 选 了 “for All User,on Port 80,as a 
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Service-Recommended.” 这 些 选 项 ， 则 说 明 Apache 已 经 自动 启动 了 。 可 以 发 现 ， 此 时 在 


Windows 工作 列 上 的 系统 图 标 中 多 了 一 个 国内 
如 果 在 Apache 服务 器 停止 服务 后 
统 图 标 中 选择 旧 


启动 Apache 服务 器 的 服务 。 


2. Apache 服务 器 的 停止 
Vp 
快捷 菜单 ， 只 要 单 击 选择 “Stop F 
1E Apache 服务 器 的 服务 ， 这 时 Apache 的 系统 图 标 变 成 大 
3. Apache 服务 器 的 目录 


正常 情况 下 ，Apache 服务 器 主 目录 的 预 设 位 置 在 C:\Program Files\Apache Software 
Foundation\Apache 路 径 下 ; 由 
因此 主 目 录 也 在 C:\Apache 路 径 下 。 打 开 的 一 级 


Apache 服务 器 各 主 目录 的 意义 与 月 


FEV Wo IAV WHY 


Qa- O- $ prr x E- 


于 前 面 安 装 时 将 Apache 服务 器 安装 在 C:\Apache 文件 夹 中 ， 


标 。 
要 再 一 次 启动 Apache 服务 器 ， 那 么 请 在 Windows 系 
图 标 ， 按 鼠标 右键 弹出 快捷 菜单 ， 再 单 击 选择 “Start (开始 )” 就 可 以 重新 


上 Apache 服务 器 ， 请 在 Windows 系统 图 标 中 选择 加 图 标 ， 按 鼠标 右键 弹出 
E)" CRI 2-33) 就 可 以 停 


图 2-33 FERREA 


目录 如 图 2-34 所 示 。 


C9 创 梁 一 个 新 文件 夹 
O prtinaxen 
s 


18 个 对 象 柯 用 磁盘 宁 间 : 19.7 GB) 


图 2-34 


目 


CHANGES. txt INSTALL. txt LICENSE txt  BOTICE txt — README. txt — READWE-w... 


[的 文件 夹 目录 


昌 途 说 明 见 表 2-1. 


表 2-1 Apache 安装 文件 夹 说 明 


文件 夹 名 称 主要 功能 
bin 诸 存 编译 程序 及 指令 文件 
cgi-bin 诸 存 用 于 设置 支持 cgi 
conf 诸 存 服务 器 结构 档案 ，httpd.conf 文件 是 设置 服务 器 的 主要 文件 
Error 储存 运行 出 错时 提示 
Htdocs 诸 存 运行 成 功 时 显示 的 文件 ， 该 版 本 就 简单 的 一 行 字 
Icons 诸 存 服务 器 显示 相应 网 页 的 所 有 图 片 文件 
Include 储存 支持 服务 器 的 一 些 主要 包含 文件 
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( 续 ) 
文件 夹 名 称 主要 功能 
Lib 储存 Apache 所 需 的 lib 文件 
logs 储存 日 志 档 案 
manual 储存 服务 器 的 模块 功能 文件 
modules 储存 网 页 应 用 程序 的 目录 


4. 服务 器 的 网 站 目录 

Apache 服务 器 安装 完成 后 ， 需 要 将 所 有 PHP 网 站 目录 都 放 到 C:/Apache/htdocs 文件 夹 
内 。 例 如 ， 写 了 一 个 名 为 website 的 PHP 网 站 目录 ， 则 这 个 website 的 网 站 目录 应 该 放 到 
C:\Apache\htdocs\ 资 料 夹 中 。 当 然 也 可 以 直接 打开 httpd.conf 文件 ， 找 到 图 2-35 所 示 的 位 


目录 。 


B httpd. 


置 ， 对 DocumentRoot "C:/Apache/htdocs" 这 一 行 代 码 进行 相应 的 设置 ， 即 可 更 改 为 新 的 网 站 


[7 


XO) 4894580) 格式 0) 查看 (Y) 帮助 00 


[JITTTT 
# docume: 
# synbol 


" Each d 
" to uhi 
# direct 
" 


" First, 


ntRoot: The directory out of which you will serve your 
nts. By default, all requests are taken from this directory, but 
ic links and aliases may be used to point to other locations. 


irectory to which Apache has access can be configured with respect 
ch services and features are allowed and/or disabled in that 
ory (and its subdirectories). 


we configure the "default" to be a very restrictive set of 


# features. 


«Directory /> 


Opti 


ons FollowSymLinks 


图 2-35 设置 网 站 文件 位 置 


进行 到 此 ， 已 经 完成 了 PHP 网 页 开发 环境 Apache 服务 器 的 安装 。 


24 PIP 的 安装 与 配置 


在 计算 机 上 安装 完成 Apache 服务 器 后 ， 就 要 开始 安装 和 配置 PHP 的 执行 环境 。PHP 
的 安装 与 配置 有 多 种 方法 ， 这 里 介绍 使 用 PHP 官方 提供 的 安装 包 进行 安装 。 


241 PHP 软件 的 下 载 


安装 好 Apache 服务 器 以 后 ， 下 面 开 始 安装 PHP。PHP 软件 包 是 开发 PHP 程序 的 核 
心 ， 该 软件 包 需 要 从 PHP 官方 网 站 上 下 载 ， 地 址 为 http:/www.php.net。 下 载 的 是 PHP 
5.3.10， 这 里 以 该 版 本 为 例 ， 下 载 的 页 面 如 图 2-36 所 示 。 


从 PHP 5.2.10 WER 


F 始 (现在 有 PHP 52.10 和 PHP 5.3 两 个 版 本 )， 有 Non-Thread Safe 


与 Thread Safe 两 种 版 本 可 供 选 择 。 这 两 种 版 本 有 何不 同 ， 作 为 使 用 者 来 说 又 应 该 如 何 选择 


呢 ? 先 从 字面 意思 上 型 


E 解 ，Non-Thread Safe 就 是 非 线 程 安全 ， 在 执行 时 不 进行 线程 


CThread) 安全 检查 ;Thread Safe 就 是 线程 安全 ， 执 行 时 会 进行 线程 安全 检查 ， 以 防止 一 有 新 
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要 求 就 启动 新 线程 的 这 种 CGI 执行 方式 耗 尽 系统 资源 。 再 来 看 PHP 的 两 种 执行 方式 : ISAPI 
和 FastCGI。FastCGI 的 执行 方式 是 以 单一 线程 执行 操作 ， 所 以 不 需要 进行 线程 的 安全 检查 ， 
除去 线程 安全 检查 的 防护 反而 可 以 提高 执行 效率 ， 所 以 ， 如 果 是 以 FastCGI 无 论 搭 配 IIS 6 
或 IIS 7) 执行 PHP， 都 建议 下 载 、 执 行 Non-thread Safe 的 PHP (PHP. 的 二 进位 文档 有 两 种 
包装 方式 ， 即 msi 和 zip， 请 下 载 zip 套件 )。 而 线程 安全 检查 正 是 为 ISAPI 方式 的 PHP 准备 
的 ， 因 为 有 许多 PHP 模块 都 不 是 线程 安全 的 ， 所 以 需要 使 用 Thread Safe 的 PHP。 本 书 使 用 的 
是 Apache 服务 器 ， 所 以 要 选择 VC9 版 本 的 Thread Safe 这 个 PHP 来 安装 。 


PHP 5.3 (5.3.10) 


Download source code [21.18MB] 
VC9 x86 Non Thread Safe (2012-Feb-02 21:56:19) 


© Zp [14.94M8] 
shal: 484237664190b25950736371897e94c16C3b2c4a 


have tho Microsoft 2008 Ce 
Runtime (x44) or the Microsof 
2008 C++ Runtime (4 
‘ratalled 
VC9 x86 Thread Safe (2012-Feb-02 21:56:19) 
Do NOT use VC9 version with 
apache.org binaries œ Zio [15.078] 
CREAN Shat: 45517470913983042985d741ffdffs53dd170 人 人 
fetchod at Apache Lounge. We 
use ther binaries to buid the * baaie Deos) 
Apache SAPIs. shat: dbceSf54302078710606329df422570621692367 


o Debug Poc [8.2548] 


图 2-36 ”下载 PHP 的 最 新 安装 版 本 


2.4.2 PHP 软件 的 安装 


下 载 完成 后 即 可 以 开始 PHP 的 安装 ， 具 体 的 安装 步骤 如 下 : 
1) 双击 下 载 的 文件 php-5.3.10-win32-installermsi， 弹 出 PHP 安装 程序 的 欢迎 安装 界 
面 ， 如 图 2-37 所 示 。 


i9 PHP 5.3.10 Setup 


Welcome to the PHP 5.3.10 Setup Wizard 


The Setup Wizard will install PHP 5.3. 10 on your computer. 
Click Next to continue or Cancel to exit the Setup Wizard. 
Please disable any virus detection software you may have 
running during this installation. 


图 2-37 欢迎 安装 界面 
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2) Hubo E, FIF “End-User License Agreement (in Y” A. V 
单 击 选择 “I accept the terms in the License Agreement” 复 选 框 ， 同 意 合约 的 授权 ， 进 行 继续 
安装 ， 如 图 2-38 所 示 。 

3» yii 按钮， 打开 “Destination Folder (安装 路 径 文件 )” 向 导 界面 ， 单 击 
“Browse (浏览 )” 按 钮 更 改 PHP 的 安装 路 径 ， 这 里 为 “C: \PHP\”， 如 图 2-39 所 示 。 


IŞ PHP 5.3.10 Setup isj IŞ PHP 5.3.10 Setup 


End-User License Agreement P er Destination Folder 
Please read the folowing icense agreement carefuly Um Click Next to install to the default folder or cick Browse to choose another. 


Instal PHP 5.3.10 to: 


The PHP License, version 3.01 
Copyright (c) 1999 - 2010 The PHP Group. All rights 


Redistribution and use in source and binary forms, 
ith or without 
ification, is permitted provided that the 


图 2-38 同意 安装 图 2-39 设置 安装 路 径 


4) 设置 PHP 安装 路 径 之 后 ， 单 击 攻 SR | 拉 钮 ， 选 择 要 安装 的 Apache 版 本 号 ， 这 上 
为 Apache 2.2x Module， 如 图 2-40 所 示 。 
5) Bii Lee | 校 钮 ， 选 择 Apache 服务 器 的 安装 路 径 ， 如 图 2-41 所 示 。 


mE 


E PHP 5.3.10 Setup 


Web Server Setup 
Select the Web Server you wish to setup. 


Apache Configuration Directory 
Browse to select the directory containing the Apache Configuration Files (c... 


K|2-40 ”选择 Apache 版 本 号 图 2-41 选择 Apache 服务 器 的 安装 路 径 


6) rie 按钮， 打开 “Choose Items to Install (选择 安装 项 目 )” 界 面 ， 选 择 要 安 
装 的 PHP 组 件 ， 设 置 如 图 2-42 所 示 。 


特别 说 明 : 
在 安装 的 时 候 一 定 要 展开 PHP 的 列 选项 ， 勾 选 MySQL 的 组 件 ， 这 样 才能 把 PHP 和 
MySQL 数据 库 关 联 起 来 ， 以 方便 进一步 的 数据 库 连 接 使 用 。 
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iẸ PHP 5.3.10 Setup 


Choose Items to Install 
Select the way you want features to be installed. 


Click the icons in the tree below to change the way features will be installed. 


图 2-42 选择 安装 项 


D 设置 完成 后 单 击 医 E 按钮 ， 打 开 “Ready to install PHP (准备 安装 )” 界 面 ， 如 图 


2-43 所 示 。 
站 PHP 5.3.10 Setup 


Ready to install PHP 5.3.10 


Click Install to begin the installation. Click Back to review or change any of your 


installation settings. Click Cancel to exit the wizard. 


图 2-43 准备 安装 界面 


8) 再 单 市 马术 饥 开 始 安装 PHP， 安 装 的 过 程 会 有 安 
所 示 。 
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装 进 度 提示 ， 如 图 


2-44 
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但 PHP 5.3.10 Setup 


Installing PHP 5.3.10 


Please wait while the Setup Wizard installs PHP 5.3. 10. 


Status: 
[CLTTTITTITIITIITIITTIITIITIITIITIITITITIITITITI ) 


图 2-44 ”安装 过 程 


9) 安装 完成 后 会 显示 完成 安装 界面 ， 提 示 成 功 安装 了 PHP 软件 包 ， 单 击 忆 BE | 按钮 
完成 安装 ， 如 图 2-45 所 示 。 


($ PHP 5.3.10 Setup 


Cic the Finish button to exit the Setup Wizard. 


图 2-45 ”完成 安装 


100 这 是 最 关键 的 一 步 ， 需 要 将 安装 后 的 CAPHPVext 文件 来 下 的 驱动 文件 都 复制 到 
CNWINDOWSsystem32 下 。 

如 果 读 者 在 PHP 官方 网 站 上 下 载 的 PHP. 软件 包 非 安装 程序 而 是 压缩 包 ， 那 么 在 配置 时 
需要 设置 环境 变量 。 具 体 设置 环境 变量 的 方法 如 下 : 首先 将 PHP 包 解 压 到 指定 文件 夹 中 作 
为 PHP 的 根 目录 ， 例 如 解压 到 “Ci\PHP” 目 录 中 ; 然后 再 配置 Apache 运行 时 需要 加 载 的 
phpSapache2 2.dll 文件 ， 方 法 是 将 PHP 的 安装 路 径 志 加 到 Windows 系统 中 Path 路 径 的 下 
面 。 右 击 “ 我 的 电脑 ” 选择 “属性 ”命令 ， 在 弹出 的 “系统 属性 ” | “高 
级 ”选项 卡 ， 再 单 击 “ 环 境 变量 ”按钮 ， 打 开 “ 环 境 变量 ”对 话 框 。 从 “系统 变量 ”列表 中 
找到 Path 路 径 ， 单 击 “ 编 辑 ” 按 钮 后 ， 在 弹出 对 话 框 的 “变量 值 ” 文本 框 中 将 “ «c. PHP 

追加 到 路 径 中 ， 如 图 2-46 所 示 。 
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Path 


MESTRE Sy stenRoot t zysten32: Syst. 


系统 变量 G) 


变量 值 
ComSpec C: WINDOWS systen32Vcnd. exe 

FPNO MT C... NO 

NUMBER OF PR... 3 

0s "indows NT 

Path C: PHPN;C: NMINDOTS systen32;C: V... 


PaTVEYT COM. vvv. DAT. CHN, VEC. VEE - 


图 2-46 “编辑 系统 变量 ”对 话 框 设 1 


24.3 ”让 Apache 支持 PHP 

安装 完成 PHP 之 后 ， 并 不 能 直接 在 Apache 里 运行 PHP 文件 ， 还 要 进一步 配置 一 下 
Apache， 才 可 以 使 Apache 支持 PHP 的 运行 。 配 置 的 方法 很 简单 ， 方 法 如 下 : 

1) 进入 Apache 服务 器 的 安装 文件 夹 ， 如 图 2-47 所 示 。 


* C: Apache 
Xo) duo) 查看 WV) ZRA IAT) 帮助 00 

QAE- O-A Pme ox C 

Mi D) [88 C: \apache «ges 


ABOVI APACHE. txt 
nodules XXX 


INSTALL. txt 
文本 文档 
sm 


READEE. txt REABIE-vin32. txt 
文 可 文档 文本 文档 


6 Kb 


16 个 对 象 可 用 磁盘 宝 间 : 11.7 63) 


党 


图 2-47 进入 Apache 的 安装 文件 


S0 


第 2 章 搭建 PHP 电子 商务 网 站 开发 环境 | 


2) 双击 进入 conf 目录 ， 打 开 httpd.conf 文件 ， 在 文件 的 最 下 方 增加 下 列 一 行内 容 ( 图 


2-48): 


AddType application/x-httpd-php .php 


F httpd. conf - 记事 本 
文件 人 F) REO 格式 @) SEV 帮助 0) 


"Include conf/extra/httpd-default.conf 


# Secure (SSL/TLS) connections 
WInclude conf/extra/httpd-ssl.conf 
# 


# Note: The following must must be present to support 
starting without SSL on platforms with no /dev/random equivalent 
but a statically compiled-in mod ssl. 


<IfModule ssl module» 
SSLRandonSeed startup builtin 
SSLRandomnSeed connect builtin 
«/1fModule» 


"BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL 
PHPIniDir "C:\php\" 

LoadModule php5 module "C:\php\php5apache2_2.d11" 
hddTupe application/x-httpd-php .php 


HEND PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL 


图 2-48 加 入 支持 PHP 的 代码 


该 段 代 码 中 ， 第 1 行 表示 要 加 载 的 模块 在 哪个 位 置 存储 ， 第 2 行 表示 PHP. 所 在 的 初始 
化 路 径 ， 第 3 行 表示 将 一 个 MIME 类 型 绑 定 到 某 个 或 某 些 扩展 名 〈.php 只 是 扩展 名 中 的 一 


种 ， 这 里 也 可 以 将 扩展 名 设 定 为 .html、.php2 等 )。 
此 时 PHP 环境 就 配置 完成 了 。 


3) 


同样 查找 DirectoryIndex 这 个 代码 ， 将 其 后 面 的 代码 改 为 : 


DirectoryIndex index.php default.php index.html 


该 代码 表示 默认 访问 站 点 时 打开 的 首页 顺序 是 index.php default.php index.html。 
244 PHP 环境 的 测试 


PHP 软件 包 安 装 完成 后 ， 就 可 以 在 Apache 中 测试 PHP 环境 是 否 正确 了 。 下 面 创建 一 
个 PHP 示例 来 进行 测试 。 该 示例 是 执行 一 个 带 有 PHP 脚本 的 程序 ， 如 果 执 行 成 功 则 证 明 


PHP 安装 成 功 。 打 开 Apache 下 的 htdocs 目录 (这 里 为 C:\Apache\htdocs)， 然 后 使 用 记事 本 


创建 一 个 名 为 test.php 的 文件 ， 再 添加 如 下 代码 到 文件 ， 


<?php 


?> 


~ 


phpinfo(); // 输 出 PHP 环境 信息 


保存 test.php 文件 ， 然 后 在 IE 浏览 器 的 地 址 栏 中 输入 “http://localhost/test.php”， 如 果 
显示 PHP 的 相关 信息 ， 则 证 明 PHP 软件 包 和 环境 配置 成 功 〈 图 2-49)， 否 则 安装 失败 。 
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说 明 : 
由 于 刚才 在 前 面 重新 配置 了 Apache 服务 器 ， 所 以 在 测试 之 前 一 定 要 重启 一 下 Apache 
服务 器 ， 让 配置 的 功能 能 够 正确 地 使 用 。 


cal 1t pio 


Eau IRAD Who 


图 2-49 ”测试 安装 成 功 显 示 的 页 面 


2.4.5 PHP 文件 的 配置 


安装 PHP 后 还 可 以 根据 需要 编辑 的 php.in 文件 对 PHP 的 配置 进行 设置 。 下 面 将 对 PHP 
配置 文件 php.ini 的 组 织 方式 进行 简要 的 说 明 。 文 件 命名 为 php.ini 的 原因 之 一 是 它 遵 循 许多 
Windows 应 用 程序 中 INI 文件 的 常见 结构 。php.ini 是 一 个 ASCII 文本 文件 ， 并 且 被 分 成 几 
个 不 同名 称 的 部 分 ， 每 一 部 分 包括 与 之 相关 的 各 种 变量 。 

每 一 部 分 类 似 于 如 下 结构 : 


[MySection] 
variable-"value" 


anothervariable-"anothervalue" 


各 部 分 的 名 称 通过 方 括号 “[ ]” 括 起 来 放 在 项 部， 然后 是 任意 数量 的 “变量 名 = 值 ” 
对 ， 每 一 对 占 单独 一 行 。 如 果 行 以 分 号 “;” 开 头 则 表明 该 行 是 注释 语句 。 

在 php.ini 中 允许 或 禁止 可 使 PHP 功能 变 得 非常 简单 。 只 需要 将 相关 语句 注释 而 无 需 删 
除 ， 该 语句 就 不 会 被 系统 解析 。 当 希望 在 一 段 时 间 以 后 重新 打开 某 种 功能 的 时 候 特 别 方便 ， 
因为 不 需要 在 配置 文件 中 将 此 行 删除 。 

如 下 面 php.ini 文件 中 的 一 个 片段 : 


is 


$5555555555555555555 
; Language Options ; 


; Enable the PHP scripting language engine under Apache. 

engine = On 

; Enable compatibility mode with Zend Engine 1 (PHP 4.x) 

zend.zel compatibility mode = Off 

; Allow the <? tag. Otherwise, only <?php and <script> tags are recognized. 
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; NOTE: Using short tags should be avoided when developing applications or 
; libraries that are meant for redistribution, or deployment on PHP 

; servers which are not under your control, because short tags may not 

; be supported on the target server. For portable, redistributable code, 

; be sure not to use short tags. 

short open tag — Off 

; Allow ASP-style <% %> tags. 

asp tags — Off 

; The number of significant digits displayed in floating point numbers. 

14 


precision 


在 这 个 文件 中 可 对 PHP 的 12 个 方面 进行 设置 ， 包 括 : 语言 选项 、 安 全 模式 、 语 法 突出 
显示 、 杂 项 、 资 源 限 制 、 错 误 处 理 和 日 志 、 数 据 处 理 、 路 径 和 目录 、 文 件 上 传 、Fopen 包装 
器 、 动 态 扩 展 和 模块 设置 。php.ini 文件 存放 在 PHP 的 安装 路 径 ， 在 每 次 启动 PHP 时 都 会 读 
取 。 因 此 ， 在 通过 修改 php.ini 文件 改变 PHP 配置 之 后 ， 需 要 重启 Web 服务 器 使 配置 的 改变 
生效 。 本 书 的 实例 需要 配置 的 对 象 为 : 


magic quotes gpc = on 


magic quotes gpc 功能 : 是 否 自动 为 GPC(get;post,cookie) fo I] Zr P VV" NUT E 
RRR 

如 果 magic_quotes_gpc=on， 返 回 1 PHP 解析 器 就 会 自动 为 post、get、cookie 传 来 的 
数据 增加 转 义 字符 “” 以 确保 这 些 数 据 不 会 使 程序 特别 是 数据 库 语句 ， 因 为 特殊 字符 引起 
的 污染 而 出 现 致命 的 错误 。 

在 magic quotes gpc-on 的 情况 下 ， 如 果 输 入 的 数据 有 单 引 号 CO. XS CÓ. BUR 
线 CO 与 NULL (NULL FR) 等 字符 ， 那 么 这 些 字符 都 会 被 加 上 反 斜 线 ， 这 些 转 义 是 必 
须 的 。 如 果 这 个 选项 为 off， 返 回 0， 那 么 我 们 就 必须 调用 addslashes 这 个 函数 来 为 字符 串 
增加 转 义 。 


2.9 | MySQL 数据 库 的 安 产 


PHP 可 以 与 很 多 数据 库 完 美 地 结合 ， 从 而 开发 出 动态 网 站 。 对 于 初学 者 而 言 ， MySQL 数据 
库 被 认为 是 最 容易 上 手 的 数据 库 ， 本 小 节 将 介绍 MySQL 数据 库 的 下 载 与 安装 知识 。 


2.5.1 MySQL 数据 库 简 介 


MySQL 是 一 个 真正 的 多 用 户 、 多 线程 的 SQL 数据 库 服 务 器 。SQL (结构 化 查询 语言 ) 
是 世界 上 最 流行 的 和 标准 化 的 数据 库 语言 。MySQL 是 以 一 个 客户 机 /服务 器 结构 来 实现 的 ， 
它 由 一 个 服务 器 守护 程序 mysqld 和 很 多 不 同 的 客户 程序 及 库 组 成 。 

SQL 是 一 种 标准 化 的 语言 ， 它 使 得 存储 、 更 新 和 存 取 信息 更 容易 。 例 如 ， 能 用 SQL i5 
言 为 一 个 网 站 检索 产品 信息 及 存储 顾客 信息 ， 同 时 MySQL 也 足够 快 和 灵活 ， 以 允许 存储 记 
录 文 件 和 图 像 。 
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MySQL 主要 目标 是 快速 、 健 壮 和 易 用 。 最 初 是 因为 我 们 需要 这 样 一 个 SQL 服务 器 ， 它 


能 处 理 与 任何 在 不 昂贵 硬件 平台 上 提供 数据 库 的 厂家 在 一 个 数量 级 上 的 大 型 数据 库 ， 但 速度 更 


快 。 自 1996 年 以 来 ， 我 们 一直 都 在 使 用 MySQL， 其 环境 有 超过 40 个 数据 库 ， 包 含 10000 个 
表 ， 其 中 500 多 个 表 超 过 7 百 万 行 ， 这 大 约 有 100 个 吉 字 节 (GB)〉 的 关键 应 用 数据 。 


MySQL 建立 的 基础 是 已 在 高 要 求 的 生产 环境 中 应 用 多 年 的 一 套 实用 例 程 。 尽 管 


MySQL 仍 在 开发 中 ， 但 它 已 经 提供 了 一 个 丰富 并 且 极 其 有 用 的 功能 集 。 


在 这 里 推荐 使 用 MySQL 的 主要 原因 在 于 以 下 几 点 : 
e 便宜 (通常 是 免费 )。 

e 网 络 承 载 比较 少 。 

e 经 过 高 度 最 住 化 (HighlyOptimized)。 

e 应 用 程序 通过 它 做 起 备份 来 比较 简单 。 
e 为 各 种 不 同 的 数据 格式 提供 弹性 的 接口 。 
e 比较 好 学 上 且 操 作 简 单 。 
MySQL 的 优点 有 以 下 几 点 : 


1. 避免 网 络 阻塞 


在 文 持 多 个 使 用 者 共同 存 取 方 面 ，MySQL 内 定 最 大 连接 数 为 100 个 使 用 者 。 所 以 ， 纵 


使 在 网 络 上 有 大 量 的 数据 往来 ， 但 是 这 似乎 并 不 会 对 查询 
的 影响 。 


2. 最 佳 化 
数据 库 结构 设计 也 会 影响 到 MySQL 的 执行 效率 ， 


最 佳 化 (query optimization) 有 多 大 


例如 MySQL. 并 不 支持 外 来 键 


(Foreign key)， 这 个 缺点 会 影响 到 我 们 的 数据 库 设 计 以 及 网 站 的 效率 。 
使 用 MySQL 做 数据 库 支 持 的 网 站 ， 应 该 着 重 的 是 如 何 让 人 硬盘 存 取 减少 到 最 低 、 如 何 让 
一 个 或 多 个 CPU 随时 都 保持 在 高 速 作业 的 状态 ， 以 及 支持 适当 的 网 络 频 宽 ， 而 非 实际 上 的 


数据 库 设计 以 及 数据 查询 状况 。 
3. 多 执行 绪 


MySQL 是 一 个 快速 、 多 执行 绪 (multithread)、 多 使 用 者 且 功 能 强大 的 关系 型 数据 库 管 


理 系 统 (Relational database management system; RDBMS) 


的 连接 请 求 (request)。 


4. 可 延伸 性 以 及 数据 处 理 能 


。 也 就 是 说 当 客 户 端 与 MySQL 数 


据 库 连接 时 ， 服 务 器 会 产生 一 个 执行 绪 Cthread) 或 一 个 行程 (Process) 来 处 理 这 个 数据 库 


MySQL 同时 具有 高 度 的 多 样 性 ， 能 够 给 很 多 不 同 的 使 用 者 提供 不 同 的 接口 ， 包 括 命令 
列 、 客 户 端 操作 、 网 页 浏览 器 、 以 及 各 式 各 样 的 程序 语言 接口 ， 例 如 Ce. Perl. Java. 


PHP 以 及 Python 。 


MySQL 可 用 于 Unix. Windows, OS/2 等 平台 ， 也 就 是 说 它 可 以 用 在 个 人 计算 机 或 者 是 


服务 器 上 。 
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5. 便于 学 习 

MySQL 支持 结构 化 查询 语言 (Structured Query Language; SQL )， 精 通 数据 库 的 人 在 
一 天 之 内 ， 就 可 以 把 MySQL 学 会 。 对 于 初学 者 而 言 ， 也 非常 容易 上 手 。 
2.5.2. MySQL 数据 库 的 下 载 


可 以 到 MySQL 的 官方 网 站 http:/www.mysql.com 下 载 MySQL 的 最 新 版 本 。 下 载 
MySQL 数据 库 的 步骤 如 下 : 

1) 打开 IE 浏览 器 ， 进 入 MySQL 的 官方 网 站 http:/wwwmysqlcom， 其 页 面 如 网 2-50 
所 示 。 


x" sap sé RAWO IRAV Wh 
* em mtm rere Wenorslly Arsi 


D 
MySQL 


The workfs most popular open source database 


MySQL Downloads (Generally Available) 


目 New Releases (GA) 
< MYSQL Cluster 7.1 
7.1.21 GA) 


MySQL Community Server - MySQL Workbench 5.2 
(Current Generally Avadable Release: 5.5.23 (5.2.39 GA) 


图 2-50 打开 MySQL 主页 


2) 打开 下 载 的 频道 之 后 找到 相关 的 下 载 文件 ， 需 要 下 载 的 是 MySQL 的 最 新 版 本 
mysql-5.5.23-win32.msi, "PÉihxkfÉ "Download 〈 下 载 )” 按 钮 即 可 下 载 将 要 使 用 的 数据 库 ， 
如 图 2-51 所 示 。 


(^ MysüL i: Pownlesd 有 39L Installer — Vindi 

G- -s mr 

IU MO suo «mo IAV "hoo 
x reed te Tet der 


Download MySQL Installer 
MySQL Community Server 
MySQL installer provides an easy to use, wizard-based 
mnstallabon expenence for all your MySQL software needs. 
Included in the product are the latest versions of. 


MySQL Enterprise Edibon 


MySCK. Cluster 
MYSQL Cluster CGE s V ea 

* Al of our support connectors 
MYSQL Workbench (GUI Tool) ~ Workbench and sample models 
MySQL Connectors » Sample databases 

~ Documentation 


Generally Avaiable (CA) Releases 


MySQL Installer 5.5.23 


Contact Sales Select Platfonm: 


CEE ~ 


Windows (x86, 32-bit), MSI Installer 


图 2-51 选择 下 载 的 版 本 
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下 载 说 明 : 

MySQL 数据 库 也 是 在 不 断 更 新 的 ， 对 于 读者 而 言 ， 在 下 载 的 时 候 可 能 版 本 已 经 有 所 改 
变 ， 但 这 并 不 影响 后 面 的 操作 和 使 用 ， 所 以 可 以 下 载 时 下 的 最 新 版 本 进行 安装 使 用 。 
2.5.3 MySQL 数据库 的 安装 


下 载 的 安装 包 有 197MB， 有 具体 的 安装 步骤 如 下 : 
1) 双击 安装 程序 mysql-$.5.23-win32.msi， 打 开 欢 迎 安装 的 对 话 框 〈 图 2-52)。 与 早期 
的 一 些 版 本 相 比较 ， 该 版 本 的 安装 界面 有 了 很 大 程度 的 改变 。 


Welcome MySQL. 


The MySQL Installer quides you through the installation and configuration of your 
MYSQL products. Run it from the Start Menu to perform maintenance tasks later. 


Select one of the actions below: 


— 
Guide you through the installation and con&guraten of your. 


MYyS products. 


Learn more about MySQL products and better understand how 
you can bereit fe most 


Resources. 
Get more information on how to ratal MySQL and configure it 
mache. 


E] 2-52 始 安装 


2) 单 击 “Install MySQL Products (安装 MySQL 产品 )” 按 钮 以 继续 安装 的 程序 ， 打 开 
“License Agreement〔 终 端 用 户 许可 )” 对 话 框 ， 请 单 击 选择 “I accpt the license terms” 复 选 
框 ， 同 意 合约 的 授权 ， 进 行 继续 安装 ， 如 图 2-53 所 示 。 


License Agreement 


To install MySQL, you must accept the Orade Software License Terms. 


GNU GENERAL PUELIC LICENSE. 
Verson 2, June 1991 


(C) 1985, 1991 Free Software Foundation, Inc. 


图 2-53 同意 许可 安装 
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3) Aliet jj 按钮， 打开 “Find latest products. (查找 最 新 版 的 产品 )” 对 话 框 ， 提 示 
安装 之 前 可 以 链接 到 官方 网 站 进行 核查 并 下 载 最 新 版 的 软件 ， 这 里 单 击 选择 “Skip the check 
for updates (not recommended). (HOL EID” SAHE, "Wk 2-54 所 示 。 


国 ysSqL Installer 


Find latest products 


installation is will check if there are newer 


Before the performed, the Installer 
versions of the products you are about to install / already installed are available. 


Find latest products. 


[V] Skip the check for updates (not recommended) 


Ce j Ce Coe] 


图 2-54 BEL E 


4) 单 击 攻 Met Jil, FIF "Choose Setup Type. 〈 选 择 安装 类 型 )” 对 话 框 ， 这 时 要 选 
择 MySQL 的 安装 类 型 ， 单 击 “Custom 〈 自 定义 )” 单 选 按 钮 ， 同 时 将 路 径 改 为 
CAMySQL, ll 2-55 所 示 。 


Choosing a Setup Type 
Please select the Setup Type that suits your use case. 


Setup Type Description 


图 2-55 WoEZTCRARAUM HKK 
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5) 确认 后 ， 单 击 攻 kx zE, FIIF “Feature Selection 〈 安 装 选 择 )” 对 话 框 ， 在 这 里 
建议 保留 安装 的 默认 值 ， 即 勾 选 上 所 有 的 安装 选择 复 选 枉 ， 如 图 2-56 所 示 。 


国 aysoL Installer 


v 


Feature Selection 


— Installer 


Please select the products and features you would like to install on this machine. 
WAS Product Catalog: 
i E MySQL 5.5 Community Edition (available in this package) 


Feature Selection 


[V] Client CAPI library (shared) 
[V] Embedded server library 
[v] Debug Symbols 

[V] Server data files 


Space avalable on drive: 19.58G 
Estimated Total Space required on drive: 334.65M 


Ce) omes) (rea 


图 2-56 选择 安装 软件 
6) ğe Jiz, FTIF “Check Requirements 〈 检 查 组 件 )” 对 话 框 ， 在 该 对 话 框 中 
要 求 安装 的 环境 中 必须 有 .NET Framework 4 和 Visual C++ 的 开发 组 件 ， 如 图 2-57 所 示 。 


国 HysQoL Installer 


Check Requirements 


The following requirements must be installed before the selected products can be 
installed. If you don't want a particular requirement then go back and deselect the 
product that requires it. 


Requirement For Product 
(9 Microsoft .NET Framework 4 Client Profile MySQL Workbench CE 5.2.39 
O Microsoft Visual C++ 2010 32-bit runtime MySQL Workbench CE 5.2.39 


Check Requirements 


Current Task 


The package Microsoft Visual C++ 2010 32-bit runtime" must be installed now. Ckck on the 
Execute 
done come back here and re-check the requirements by didáng 


If you are asked to restart your computer then dedine and finish the main installation first. 
Restart your computer after this is done. 


图 2-57 ”提示 要 安装 的 组 件 
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D 如 果 用 户 的 计算 机 中 没有 安装 相应 的 组 件 ， 单 击 世 Ba 按钮 ， 安 装 程序 就 会 自动 从 
互联 网 上 下 载 相 应 的 组 件 安装 程序 ， 下 载 的 进度 提示 如 图 2-58 所 示 。 


| 


Check Requirements 


The following requirements must be installed before the selected products can be 
installed. If you don't want a particular requirement then go back and deselect the 
product that requires it. 


Requirement For Product 
Ql Microsoft .NET Framework 4 Client Profile MySQL Workbench CE 5.2.39 
(9) Microsoft Visual C++ 2010 32-bit runtime MySQL Workbench CE 5.2.39 


Check Requirements 


r Qurrent Task 
Downloading Microsoft Visual C++ 2010 32-bit runtime 


图 2-58 ” 设 定 安装 类 型 和 目录 安装 

8) 下 载 成 功 后 会 自动 弹出 开始 安装 相应 组 件 的 对 话 框 ， 这 里 以 安装 Microsoft Visual 
C++ 2010 为 例 ， 开 始 安 装 时 打开 安装 的 对 话 框 ， 勾 选 “ 我 已 阅读 并 接受 许可 条 款 ” 复 选 
框 ， 如 图 2-59 所 示 。 


Tl 


欢迎 使 用 Nicrosoft Visual Ctt 2010 x86 Redistributable 安装 程序 
请 接受 许可 条 款 以 继续 。 on 


MICROSOFTR PHPF 4 SX 4 
MICROSOFT VISUAL C++ 2010 RUNTIME LIBRARIES w 


ao s EE AA 3| a| 


口 是 , É Microsoft Corporation 发 送 有 关 我 的 安装 体验 的 信息 A). 
有 关 详 细 信 息 ， 请 阅读 数据 收集 策略 。 


图 2-59 接受 安装 许可 对 话 框 
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9) 单 击 “ 安 装 ” 按 钮 ， 打 开 “ 安 装 进 度 ” 对 话 框 ， 由 于 只 是 安装 简单 的 环境 组 件 ， 记 
以 并 不 需要 进行 复杂 的 配置 ， 只 需 等 待 安装 完成 即 可 ， 如 图 2-60 所 示 。 


Eo 了 crosoft Visual C++ 2010 x86 Redistributable ... a E 


安装 进度 
正在 安装 Microsoft Visual C++ 2010 x86 Fedistributable， 请 稍 候 。 on 


正在 安装 Microsoft Visual C++ 2010 Redistributable 


图 2-60 ”安装 组 件 的 过 程 


100 安装 结束 后 会 弹出 “安装 完毕 ”对 话 框 ， 如 图 2-61 所 示 。 


Ep Nicrosoft Visual C++ 2010 x86 Redistributable ... B Ed 


已 安装 Microsoft Visual C++ 2010 x86 
Redistributables 


图 2-61 设 定安 装 类 型 和 目录 安装 


11) 单 击 “ 完 成 ”按钮 ， 完 成 组 件 的 安装 ， 这 时 原来 的 “Check Requirements 〈 检 查 组 
件 )” 对 话 框 中 的 组 件 单 选 按 钮 就 自动 勾 选 上 了 ， 如 图 2-62 所 示 。 
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| 


Check Requirements 


T Installer 


The following requirements must be installed before the selected products can 
installed. Fem mr pue mne end and pi the 
product that requires it. 


(V Microsoft Visual C++ 2010 32-bit runtime MySQL Workbench CE 5.2.59 
(9 Microsoft NET Framework 4 Client Profile MySQL Workbench CE 5.2.39 


Check Requirements 


r Current Task 


Al required prerequisites are met. Continue by dicking on the Next button. 


we» ][ cm ] 


图 2-62 组件 安装 完成 


JHH, FTF “Installation Progress. (安装 进程 )” 对 话 框 ， 对 话 框 中 显 
示 了 安装 软件 的 进度 为 “To be Installed (即将 被 安装 )” 状 态 ， 如 图 2-63 所 示 。 


国 aysQL Installer 


Installation Progress 
MySQL. Installer 
| Product | Status 
MySQL Server 5.5.23 To be installed 
加 | MYSQL Workbench CE 5.2.39 To be installed 
Connector/ODBC 5.1.10 To be installed 
E Connector/C++ 1.1.0 To be installed 
[re] comeaovceoz To be installed 
k] Connector) 5.1.19.0 To be installed 
加 | Connector/NET 6.4.4 To be installed 
[S| MySQL Documentation 5.5.23 To be installed 
Samples and Examples 5.5.23 To be installed 


Installation 


Chick [Execute] to install or update the following packages 


图 2-63 提示 即将 安装 


13) 单 击 基 E 按 钮 ， 则 安装 程序 自动 开始 安装 所 有 的 程序 ， 并 提示 安装 的 进程 ， 如 
图 2-64 所 示 。 


01 


[ 赢 在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


国 aysQoL Installer 


Nu Installer 


Installation 


Installation Progress 


The following products will be installed or updated. 


Product. 
2 [EN] MySQL Server 5.5.23 

[A | MySQL Workbench CE 5.2.39 
Connector/ODBC 5.1.10 
Connector/C4-- 1.1.0 
Connector/C 6.0.2 
Connector/) 5.1.19.0 
Connector/NET 6.44 
MySQL Documentation 5.5.23 
Samples and Examples 5.5.23 


Status. 
Installing 
To be installed 
To be installed 
To be installed 
To be installed 
To be installed 
To be installed 
To be installed 
To be installed 


图 2-64 ”开始 安装 的 进程 


14) 所 有 安装 选项 前 面 打上 对 勾 时 ， 表 示 该 程序 安装 成 功 ， 安 装 完 成 的 对 话 框 如 图 2-65 


所 示 。 


B aysQoL Installer 


N 
MySQL. Installer 


Installation 


15) 单 了 


in 


E, H7 


的 MySQL 数据 库 将 要 进 
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行 确 


Installation Progress 


Connector/ODBC 5.1.10 
Connector/C4-k- 1.1.0 
Connector/C 6.0.2 
Connector/) 5.1.19.0 
Connector/NET 6.4.4 

MySQL Documentation 5.5.23 
Samples and Examples 5.5.23 


认 ， 如 图 2-66 所 示 。 


图 2-65 ”安装 完成 的 对 话 框 


F “Configuration Overview AWATA W)” XUE, term zi 


sat Installer 


Configuration 
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Bj ysol Installer 


Configuration Overview 

The following products will now be configured. 
[ roat . Acton to be performed 
» MySQL Server 5.5.23 Initial Configuration. 


图 2-66 "Configuration Overview 〈 确 认 预 览 ) ”对 话 框 


16) hE, H “MySQL Server Configuration (数据 库 确 认 )” 对 话 框 ， 


首先 根据 提示 选择 数据 库 服 务 器 的 安装 类 型 ， 这 里 单 


器 )” 单 选 按 钮 ， 如 图 2-67 所 示 。 


con Installer 


国 ysol Installer 


MySQL Server Configuration 


Please select the type of configuration for the MySQL Server instance. 


This is a development machine, and many other applications will be 
Po installed on it. A minimal amount of memory wil be used by MySQL. 


© Server Machine 
g Several server applications wil be running on this machine. Choose this 


option for web/application servers. MySQL wil have medium memory 
usage. 


O Dedicated Machine 
This machine is dedicated to running the MySQL database server. No 
other servers, such as web servers, wil be run. MySQL will make use of 
all available memory. 


图 2-67 设 定安 装 类 型 和 目录 安装 


F “Developer Machine (开发 者 机 


VD 选择 确认 模式 后 再 单 击 国 加 于 按钮 ， 勾 选 所 有 的 复 选 框 ， 其 中 “Create Windows 
Service GI Windows 的 选项 )” 表 示 将 MySQL 数据 库 服 务 器 注册 为 Windows 的 服务 以 方 


便 管理 。 


H 


设置 端口 为 3306， 并 两 次 输入 前 面 安装 时 设置 的 root 密码 ， 这 里 设置 的 密码 为 
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admin， 后 面 章节 数据 库 登 录 的 密码 全 是 使 用 admin， 有 具体 的 设置 如 图 2-68 所 示 。 


B yso Installer 


mo Installer 


MySQL Server Configuration 


Please specify the Network, Windows, and Security settings 
[V] Enable TCP/IP Networking 


Enable this to alow TCP/IP networking. Only localhost connections. 
through named pipes are allowed when this option is skipped. 


por manier m] 


[V] Create Windows Service 


Phase tpaciy a Tore Bérvich rada to baud br D MU 
Ry Server instance. A unique name is required for each instance. 


Windows Service Name: MySQL55 


Enter the password for the root account. Please remember to store 
this password in a secure place. 


图 2-68 确认 安全 设置 


18) WU Jc FE HEN 国 按钮 ， 打 开 最 后 的 “Installation Complete (完成 安装 )” 对 话 
框 ， 勾 选 “Star MySQL Workbench after Setup〔 完 成 安装 后 启动 MySQL 的 工作 界面 )” 复 选 


dE, "nl 2-69 Br. 


国 aysQL Installer 


E eoe 


Complete 
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Installation Complete 
The installation procedure has been completed. 


[V] Start MySQL Workbench after Setup 


图 2-69 ”完成 安装 的 对 话 框 
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"URS. Ü"RIIIESOHEUHI MySQL 数据 库 的 安装 就 完成 了 。 用 上 述 的 方法 安装 完 
数据 库 后 打开 C 盘 下 的 Mysql AFK, EMAA my.ini 的 配置 文件 ， 由 于 是 默认 安装 所 以 
查找 到 如 下 的 代码 : 


#Path to the database root 


datadir-" C:/Documents and Settings/All Users/Application Data/MySQL/MySQL Server 5.5/Data/ 


AOEORGUS PERIERE EG, B 


CX 


后 面 章节 所 有 制作 的 实例 的 数据 库 都 可 以 直接 放 在 这 里 。 


2.6 | MySQL 数据 库 的 管理 


在 安装 完 MySQL 数据 库 后 ， 可 以 自动 运行 数据 库 的 管理 软件 MySQL. Workbeach， 
如 图 2-70 所 示 。 该 数据 库 管 理 软件 是 英文 版 的 ， 对 于 英语 不 是 很 精通 的 人 来 说 ， 去 学 习 使 
用 具有 一 定 的 难度 。 在 国内 比较 普及 的 针对 MySQL 数据 库 进 行 管理 的 软件 还 有 好 几 款 ， 其 
中 phpMyAdmin 是 最 简单 的 网 页 版 ， 由 于 该 软件 有 中 文 版 ， 配 置 也 非常 的 简单 ， 所 以 这 里 
HEHEH phpMyAdmin 对 MySQL 数据 库 进行 管理 应 用 。 


LITT 


HER 
^" 


Welcome to ipee Workbench 


Workspace 


SQL Development 


Connect to existing databases and rus 


Ra — 


f ee ER toti rm SQ. sott 


图 2-70 MySQL Workbeach 3: 


2.6.1 phpMyAdmin 的 下 载 


phpMyAdmin 是 一 种 MySQL 的 管理 工具 ， 安 装 该 工具 后 ， 即 可 通过 Web 形式 直接 管 

理 MySQL 数据 ， 而 不 需要 通过 执行 系统 命令 来 进行 管理 ，phpMyAdmin 非常 适合 对 数据 库 

操作 命令 不 熟悉 的 数据 库 管理 者 使 用 ， 下 面 就 从 phpMyAdmin 官网 上 下 载 该 软件 。 
下 载 的 步骤 如 下 ; 
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1) 打开 phpMyAdmin 的 官方 站 点 : http//www.phpmyadmin.net/ ， 在 页 面 中 选择 
“Download〈 下 载 )”， 进 入 下 载 页 面 ， 如 图 2-71 所 示 。 
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[CC phpEyAdain - Windows Internet Explorer 


FRR 


XAO ap sto RAW IAD FHV 
LECCE [ 


MyAdmin News Security Support Docs Try Contribute Themes Download 


About Download 3.5.0 
gz .zip notes 
phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the World 


Wide Web. phpMyAdmin supports a wide range of operations with MySQL. The most frequently used operations 
are supported by the user interface (managing databases, tables, fiekis, relations, indexes, users, permissions, 
etc), while you still have the ability to directly execute any SQL statement. z 


phpMyAdmin comes with a wide range of documentation and users are welcome to update eR 
our wiki pages to share ideas and howtos for various operations. The phpMyAdmin team UO ge ses 


will try to help you if you face any problem; you can use a variety of support channels to get 
help Donate to phpMyAdmin 


phpMyAdmin is also very deeply documented in a book written by one of the developers — 
Mastering phpMyAdmin for Effective MySQL Management, which is available in English, 
Czech and Spanish. 


To ease usage to a wide range of people, phpMyAdmin is being translated into 68 languages and supports both LTR and RTL 
languages. 


Since version 3.0.0, phpMyAdmin joined the GoPHP5 initiative and dropped compatibility code for older PHP and MySQL 
versions; version 3 and later requires at least PHP 5 2 and MySQL 5. 


phpMyAdmin has won several awards. Among others, it was chosen as the best PHP application in various awards and has won every year the. 
SourceForge net Community Choice Awards as "Best Tool or Utility for SysAdmins" 


phpMyAdmin is a thirteen-year-old project with a stable and flexible code base, to find out more about the project and its history n 图 


图 2-71 下 载 phpMyAdmin WA 


2) 查找 到 最 新 的 版 本 后 ， 选 择 “all-languages.zip” 文 件 包 进行 下 载 ， 如 图 2-72 所 示 。 


(C phpEyAdain - Download - Windows Internet Explorer 


EO- M, http 1 phpeysdnin net/bone page/downloads pip 


IPV qug FEV VREG IAW EHW 


If you do not have a package available or desire to install your own phpMyAdmin, you can download one of following source packages. Please note that 
phpMyAdmin requires at least PHP 5 2 and MySQL 5 


phpMyAdmin 3.5.0 


Released Sat, 07 Apr 2012 11:24:49 GMT, see release notes for details. 
Version compatible with PHP 5 2 and MySQL 5. Currently recommended version 


File Size MD6 checksum 
phpMyAdmin-3.5.0-al-languages.7z 34 MiB 466eedf9af721369a333ee3d1b575882 
phpMyAdmin-3 5.0-all-languages tar bz2 4.5 MiB 984159d0bca857d571af3a1 1c1b30af6 
phpMyAdmin-3.5.0-al-languages.tar.gz 5.6 MiB f76b01298d3391ccdd15bbb65195b7e4 
phpMyAdmin-3.5.0-al-languages.tarxz 3.4 MiB 55b344097211310a44be[29c332e2b4f 

/Admin-3,5.0-alHla 5.8 MiB 8cf4b1949e86cac154943876e0c55360 
phpMyAdmin-3.5 0-english 7z. ~ 22 MiB 1374d1218a2e02e37888bbd32431a6732 
phpMyAdmin-3.5.0-english.tar.bz2 2.5 MIB 53f6d3d3ce245685d724ble5ba7cc5b1 
phpMyAdmin-3.5.0-english tar gz 2.8 MiB 2a88b2255d4684fd9461b67a28f37151 
phpMyAdmin-3 5 O0-english tar xz 22 MiB 1ccb52b42818ba5b[364448813a192c8 
phpMyAdmin-3.5.0-english.zip 3.1 MiB 0639d2d8d/3b039e8c83923a29b37971 


Development Versions 


Git repositories are located at gi « : / /github. com/phpmyadsi n/REPONAME . git and you can browse them online using github. 


Below are listed Git snapshots for trunk branch, more daily snapshots of the code are available on external server. 


图 2-72 选择 下 载 的 文件 包 


3) 下 载 完 成 的 ZIP 文件 需 通 过 解压 软件 解压 到 本 地 硬盘 。 如 果 本 地 有 MySQL， 则 可 
在 本 地 进行 测试 ， 这 里 将 所 有 的 解压 文件 都 复制 到 C:\Apache\htdocs 文件 夹 内 (图 2-73). 
这 样 ， 就 可 以 通过 “http://localhost/phpmyadmin ”进行 访问 了 。 
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文件 到) SED ZEV REAO IRW R50 


Qa- O- B| st ohm | 国 - 
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HBk 0) [E C: \Apache\htdoes 


文件 和 文件 夹 任 务 
[i] 重 命 名 这 个 文件 去 index. html test.php — phpliyAdm 
Gy EDITE 
Srb6x PH 


Q sitxüsem 
Li 
gg 共享 此 文件 夹 


全 请 


X Bison 


2.0.2 phpMyAdmin 的 安装 


图 2-73 解压 缩 到 Apache 站 点 文件 内 


无 论 是 在 本 地 测试 还 是 在 远程 服务 器 上 测试 ， 都 需要 进行 如 下 的 文件 配置 才能 正常 使 


用 phpMyAdmin. 


配置 的 方法 也 比较 简单 ， 有 具体 的 配置 步骤 如 下 : 
D 在 下 载 并 解压 后 的 文件 夹 中 查找 到 文件 config.sample.inc.php， 这 是 phpMyAdmin 配 


器 时 必须 上 传 该 文件 ， 如 图 2-74 所 示 。 


è phpiyådain 
O (iq) FEV KEW IAW HAW 


Qa- O i$ Orn zr 国 - 


E C:\Apache\htdocsiphpliyidnin 


置 文件 的 样本 文件 ， 需 要 复制 该 文件 中 的 所 有 代码 ， 同 时 新 建 一 个 文件 config.inc.php, 2 
后 将 代码 粘贴 到 新 建 的 文件 中 。 文 件 config.inc.php 是 phpMyAdmin 的 配置 文件 ， 上 传 服务 


XA XO 


a] Etarte 
By 入 Rb 这个 文件 
复制 这 个 文件 
O 桂 这个 文件 发 到 Ya 
A gyra 


x PS 这 个 文件 


db qbe.php db routi 


类 型 ; pP 文件 修改 日 期 : 2012-4-20 17:34 大 小 : 3.87 XB 


图 2-74 创建 config.inc.php 文件 
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2) 对 于 config.inc.php 文件 ， 最 重要 的 就 是 修改 加 入 phpMyAdmin 链接 的 MySQL 的 
用 户 名 和 密码 ， 寻 找到 代码 行 : 


Php 代码 

// $cfg['Servers'][$i]['controluser'] = 'pma'; 

// $cfg['Servers'][$i]['controlpass'] = 'pmapass'; 
// $cfg['Servers'][$i]['controluser'] = 'pma'; 

// $cfg['Servers'][Si][ controlpass'] = 'pmapass'; 


将 “/” 注 释 号 删除 ， 同 时 输入 MySQL 中 配置 的 用 户 名 和 密码 〈 远 程 服务 器 的 请 联系 


你 的 空间 服务 商 )， 比 如 这 里 : 
Php 代码 
$cfg['Servers'][$il]['controluser'] = 'root'; 
$cfg['Servers'][$i]['controlpass'] = 'admin'; 
S$cfg['Servers'][Si]['controluser'] = 'root'; 
$cfg['Servers'][$i]['controlpass'] = '******'; 


修改 后 的 文档 如 图 2-75 所 示 。 


P config. inc. php 


文件 人 ) 编辑 区) BEO EV WR500 

mysql if your server does not have mysqli */BE$cfg['Servers'][$i]['extension'] = 
“mysqli' ;mS$cFg[ Servers’ J[$i][*AllowNoPassword’] = false;NN/*N * phpHyfdnin 

configuration storage settings.N ”/0B/» User used to manipulate with storage */N// 


'phpnyadmin';8N// $cfg['Servers'][$i] 
['bookmarktable'] = 'pma booknark' ;N// $cfFg['Servers'][$i]['relation'] = 
*pma relation';W// $cfg['Servers'][S$i]['table info'] = 'pma table info';N// $cfg 
['Servers'][$i]['table coords'] = 'pma table coords' ;8// $cfg['Servers'][$i] 
['pdf pages'] = 'pma pdf pages';8// $cfg['Servers'][$i]['column info'] = 
*pma column info';N// $cfg['Servers'][S$i]['history'] = 'pma history' ;B// $cfg 
['Servers'][S$i]['table uiprefs'] = 'pma table uiprefs';N// $cfg['Servers'][$i] 
['tracking'] = 'pma tracking';W// $cfg['Servers'][$i]['designer coords'] = 
*pma designer coords';N// $cfg['Servers'][$i]['userconfig'] = 'pma userconfig' ;W// 
$cfg['Servers'][$i]['recent'] = 'pna recent' ;8// $cfg['Servers'][$i] 
['table uiprefs'] = 'pma table uiprefs';N/* Contrib / Swekey authentication */N// 
$cfg['Servers'][S$i]['auth swekey config'] = '/etc/swekey-pma.conf';NN/*N * End of 
servers configurationB */NEN/*N * Directories for saving/loading files fron serveri 
«»/RScfg['UploadDir'] = '';N$cfg['SaveDir'] = '';NE/**N * Defines whether a user 
should be displayed a "show all (records)"N * button in browse mode or not.N * 
default = falseN x/N//$cfg['Shown11'] = true;NN/*«N < Number of rows displayed 


图 2-75 修改 用 户 名 和 密码 


3) 如 果 需 要 通过 远程 服务 器 调试 使 用 phpMyAdmin， 则 需要 添加 blowfish secret. 内 容 
定义 Cookie， 寻 找到 代码 行 ; 
Php 代码 


$cfg[blowfish_secret] = "; 
/设置 内 容 为 COOKIE 


$cfg['blowfish_secret'] = 'evernory'; 


设置 后 如 图 2-76 所 示 。 
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P config.inc.php - 记事 本 

文件 下 ) 8:808) 格式 (0) EEV 帮助 山 

«?phpB/* vim: set expandtab su-^5 ts=4 sts-h: x/W/*xxN * phpMyAdnin sample 
configuration, you can use it as base fori * manual configuration. For easier 
setup you can use setup/B +E * A11 directives are explained in Documentation.html 
and on phpMy&dminB * wiki 4http://wiki.phpmnyadmin.net?.N x * Gpackage Phphyñdmini 
*/NSN/*N * This is needed for cookie based authentication to encrypt password ini * 
cookieB «/ESTTIBOGUIISUHUEGISSENETHEUZHH/s YOU MUST FILL IN THIS FOR 
COOKIE AUTH? */EN/*N * Servers configurationB x/N$i = 0;NN/*N * First serveri */N 
$i**;N/* Authentication type x/NRB$cfg['Servers'][$i]['auth type'] = 'cookie';N/* 
Server parameters x/R$cfg['Servers'][$i]['host'] = 'localhost';W$cfg['Servers'] 
[Si]['connect type'] = 'tcp';l$cfg['Servers'][$i]['compress'] = false;N/* Select 
mysql if your server does not have mysqli «x/RS$cfg['Servers'][$i]['extension'] = 
'nysqli';W$cfg['Servers'][S$i]['RllowNoPassword'] = false;NN/*N * phpHyfdnin 
configuration storage settings.NM */NN/* User used to manipulate with storage */N// 
$cfg['Servers'][$i]['controlhost'] = '';W $cfg['Servers'][$i]['controluser'] = 
'root';N $cfg['Servers'][$i]['controlpass'] = 'admin';NN/* Storage database and 
tables */N// $cfg['Servers'][S$i]['pmadb'] = 'phpnmyadnin';W// $cfg['Servers'][$i] 
['bookmarktable'] = 'pma bookmark';N// $cfg['Servers'][$i]['relation'] = 

'pma relation';8N// $cfg['Servers'][$i]['table info'] = 'pma table info';N// $cfg 
['Servers'][$i]['table coords'] = 'pma table coords';N// $cfg['Servers'][$i] 

['pdf pages'] = 'pma pdf pages';8// S$cfg['Servers'][$i]['column info'] = 

'pma column info';N// $cfg['Servers'][$i]['history'] = 'pma history';8N// $cfg 


图 2-76 设置 Cookie 权限 


2.6.3 phpMyAdmin 的 使 用 


在 IE 浏览 器 中 输入 http://127.0.0.1/phpmyadmin/ ， 进 入 phpMyAdmin 页 面 后 输入 
MySQL 用 户 的 用 户 名 和 密码 ， 如 图 2-77 所 示 。 


/7 phpKyAdmin — Windows Internet Explorer 


go- A http: //121.0.0. 1/phpeyadnin/ 


Xt REO 查看 WV) RRO IAW 帮助 0D 


欢迎 使 用 phpMyAdmin 


图 2-77 打开 管理 主 界面 


hE 击 “ 执 行 ” 按 钮 即 可 进入 软件 的 管理 界面 ， 选 择 相 关 数 据 库 可 以 看 到 数据 库 中 的 各 
表 ， 可 以 进行 表 、 字 段 的 增 、 删 、 改 ， 也 可 以 导入 、 导 出 数据 库 信息 ， 如 图 2-78 所 示 。 


Im 
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MG 127.0.0.1 / localhost | phpiyådain 3.5.0 - Windows Internet Explorer 


GO- http: 11127.0.0. 1/phpayadnin/ index, phy? tokenz41 7285401100396 0fa9«7 «160 529 a aEPIBAURL: s i [x] [ei 


XH REV EEV RRO IAV Wb 
一 
RES 


 usmm Esa ats 8^ 加 导出 BSA WR MH» Lau v 更 多 


D gos * fH: localhost va TCPAP 


M RAHNER @ :| uf goner ci aj i E 5.5.23 - MySQL Community 
Server (GPL) 

* 协议 版 本 : 10 

bs 


* 服务 器 宇 符 集 ;: UTF-8 Unicode (utf8) 


& Language © : 中 文 - Chinese simplified a 


es [mome | 
a 


. 字号 : | 82% 


* Apache/2 2 22 (Win32) PHP/5.3.10 

$ 更 多 设置 ， SEHBIET P EA: ibmysql - mysqind 
5.0.8-dev - 20102224 - SRewsion: 321634 $ 

PHP 扩展: mysqi @ 


phpMyAdmin 


。 版本 信息 : 350 (已 更 新 ) 
* 文档 


图 2-78 ”软件 的 管理 界面 


MySQL 数据 库 的 管理 软件 有 很 多 ， 读 者 也 可 以 下 载 一 些 其 他 常用 的 软件 进行 管理 
于 初学 者 而 言 ， 建 议 使 用 phpMyAdmin 软件 。 
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网 站 用 户 界面 (Website User Interface) 是 指 网 站 用 于 和 用 户 交 流 的 外 观 、 部 件 和 程序 
等 。 很 多 网 站 设计 很 朴素， 看 起 来 给 人 一 种 很 舒服 的 感觉 ， 有 的 网 站 很 有 创意 ， 能 给 人 带 来 
意外 的 惊喜 和 视觉 的 冲击 ; 而 相当 多 的 网 站 页 面 上 充斥 着 怪异 的 字体 、 花 哨 的 色彩 和 图 片 ， 
给 入 网 页 制作 粗 劣 的 感觉 。 企 业 网 站 界面 的 设计 是 电子 商务 网 站 建设 中 的 第 一 个 环节 。 一 般 
而 言 网 站 的 UI 设计 是 指 网 站 整体 的 视觉 美工 设计 ， 其 中 网 站 的 首页 设计 尤为 重要 ， 因 为 其 
他 页 面 的 风格 基本 上 是 与 首页 的 风格 一 致 的 。 从 设计 的 内 容 来 说 网 站 首页 的 设计 主要 包括 版 
式 的 分 析 设 计 、 网 页 的 大 小 设计 、 导 航 条 设计 及 页 面 框架 的 搭建 与 分 割 等 工作 ， 涉 及 的 软件 
主要 有 用 于 设计 的 Photoshop 和 Fireworks 等 平面 设计 软件 。 由 于 Photoshop 的 使 用 较 广 泛 ， 
本 书 就 使 用 Photoshop 软件 实现 界面 的 设计 。 


本 章 重 点 介绍 如 下 知识 : 


网 页 设计 原则 与 内 容 
网 站 首页 设计 流程 
网 
网 


站 首页 设计 实例 
站 使 用 图 片 的 分 割 


3.1 | 网 页 设计 原则 与 内 容 


网 站 界面 的 设计 ， 既 要 从 外 观 上 进行 创意 以 达到 吸引 眼球 的 目的 ， 还 要 结合 图 形 和 版 
面 设计 的 相关 原理 ， 从 而 使 得 网 站 设计 变 成 了 一 门 独 特 的 艺术 。 做 网 站 设计 的 时 候 要 注意 一 
些 设计 原则 。 


311 界面 设计 原则 
通常 电子 商务 网 站 用 户 界面 的 设计 应 遵循 以 下 儿 个 基本 原则 (图 3-1): 
1. 用 户 实用 原则 


设计 网 页 首先 要 明确 到 底 谁 是 使 用 者 ， 要 站 在 用 户 的 观点 和 立场 上 来 考虑 和 设计 网 
站 。 要 做 到 这 一 点 ， 必 须 和 用 户 沟通 ， 了 解 他 们 的 需求 、 目 标 、 期 望 和 侦 好 等 。 网 页 的 设计 
要 清楚 ， 用 户 之 间 差 别 很 大 ， 他 们 的 能 力 各 有 不 同 。 另 外 ， 用 户 使 用 的 计算 机 配置 也 是 干 
差 万 别 ， 包 括 显 卡 、 声 卡 、 内 存 、 网 速 、 操 作 系统 以 及 浏览 器 等 都 会 有 所 不 同 。 设 计 者 如 果 
忽视 了 这 些 差 别 ， 设 计 出 的 网 页 在 不 同 的 机 器 上 显示 就 会 造成 混乱 的 结果 。 
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用 户 实用 原则 


B 
r : 
1 

H 简易 原则 

1 
| 一 一 | 布局 控制 


人 e 
SIT 1 MM Ens BE Fe 
界面 设计 上 一 = 视觉 和 谐 原 则 


1 
色彩 和 文字 可 读 性 
1 
1 
1 
1 


= 致 性 原则 H 
- 


图 3-1 界面 设计 的 原则 


2. 简易 原则 


简洁 和 易于 操作 是 网 页 设计 的 最 重要 的 原则 。 网 站 建设 出 来 是 用 于 普通 网 民 来 查阅 信 


息 和 使 用 网 络 服 务 的 。 没 有 必要 在 网 页 上 设置 过 多 的 操作 ， 堆 集 很 多 复杂 和 花哨 的 图 片 。 该 


原则 一 般 的 要 求 为 : 网 页 的 下 载 不 要 超过 10 秒 钟 ， 尽 量 使 用 文本 链接 ， 而 减少 大 幅 图 片 和 


动画 的 使 用 ， 操 作 设 计 尽 量 简单 ， 并 且 有 明确 的 操作 提示 ， 网 站 所 有 的 内 容 和 服务 都 应 在 显 
眼 处 向 用 户 予以 说 明 等 。 


3. 布局 控制 


照抄 他 人 。 
一 般 在 网 页 设计 上 所 要 遵循 的 原理 有 : 


rm 


(1) 722 比特 
根据 心理 学 家 George A.Miller 


建设 中 ， 一 般 网 页 上 面 的 栏目 选择 最 人 


关于 网 页 排版 布局 方面 ， 很 多 网 页 设计 者 重视 不 够 ， 网 页 排版 设计 得 过 于 死板 ， 甚 至 


如 果 网 页 的 布局 凌乱， 仅仅 把 大 量 的 信息 堆 集 在 页 面 上 ， 会 干扰 浏览 者 的 阅读 。 


的 研究 表明 ， 人 一 次 性 接受 的 信息 量 在 7 个 比特 左右 为 


。 总 结 一 个 公式 为 : 一 个 人 一 次 所 接受 的 信息 量 为 7+2 比特 。 这 一 原理 广泛 应 用 于 网 站 
E 在 5 一 9 个 之 间 ， 如 果 网 站 所 提供 给 浏览 者 选择 的 内 


容 链接 超过 这 个 区 间 ， 人 在 心理 上 就 会 虎 躁 、 压 抑 ， 会 让 人 感觉 到 信息 太 密 集 ， 看 不 过 来 ， 


很 黑 。 很 多 国内 的 网 站 在 栏目 的 设置 上 远 远 才 


Pa 


出 这 个 区 间 。 


jm) 


(2) 分 组 处 理 


上 面 提 到 ， 对 于 信息 的 分 类 ， 不 能 超过 9 个 栏目 。 但 如 果 内 容 实在 是 


( 


要 超出 了 9 个 ， 


则 需要 进行 分 组 处 理 。 如 果 网 页 上 提供 几 十 篇 文章 的 链接 ， 则 需要 每 隔 7 篇 加 一 个 空 行 或 平 
行 线 进行 分 组 。 


下 ， 
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图 形 与 一 块 文字 相 比 较 ， 
时 需要 以 更 多 的 文字 来 平衡 一 幅 图 片 。 男 外 ， 按 照 


4. 视 党 和 谐 原则 


设计 网 页 时 ， 各 种 元 素 〈 如 图 形 、 文 字 、 空 白 ) 都 会 起 到 视觉 作用 。 根 据 视觉 原理 ， 
图 形 的 视觉 作用 要 大 一 些 。 所 以 ， 为 了 达到 视觉 


因此 视觉 平衡 也 要 遵循 这 个 道理 


PP 国人 的 阅读 习惯 是 从 左 到 右 ， 从 上 到 


F 衡 ， 在 设计 网 页 


E. 如果 很 多 的 文字 是 及 月 


日 左 对 齐 ， 则 需要 在 网 页 的 右边 


加 一 些 图 片 或 一 些 较 明 亮 、 较 
一 个 页 脚 部 分 ， 页 眉 部 分 常 放 置 
和 版 权 信 息 等 ， 页 
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醒目 的 颜色 。 一 般 情况 下 ， 每 张 网 页 都 会 设置 一 个 页 眉 部 分 和 


些 Banner 广告 或 导航 条 ， 而 页 脚 部 分 通常 放置 联系 方式 


眉 和 页 脚 在 设计 上 也 要 注重 视觉 平衡 。 


同时 ， 也 决 不 能 低估 空白 的 价值 。 如 


果 网 页 上 所 显示 的 信息 非常 密集 ， 这 村 
站 的 形象 。 在 网 页 设计 时 ， 可 适当 增加 


5. 色彩 和 文字 可 读 性 


不 但 不 利于 读者 阅读 ， 而 且 会 引起 读者 反感 ， 破 坏 该 网 
一 些 空白 ， 精 炼 网 页 ， 使 页 面 变 得 简洁 。 


Bii 
色 使 人 兴 


A 


BEE. AUERUSSOREURCAGP E EAR 


色 是 影响 网 页 pu 的 重要 


人 例如 : 红色 和 楼 
并 使 得 心跳 加 速 ， 黄 色 使 人 联想 到 阳光 ， 


一 种 使 人 快活 的 颜色 ， 黑 颜色 显得 比 
， 需 要 为 网 页 设计 选择 合适 的 关外 (包括 背景 


E. TRE, LFE, ETES). 


为 方便 


栏 


效果 好 。 


;阅读 网 站 上 的 信息 ， 可 以 参考 报纸 的 编排 方式 将 网 页 的 内 容 分 栏 设 计 ， 有 时 两 
要 比 一 满 页 的 视觉 


另 一 种 影响 文字 可 读 性 的 


因素 是 所 选择 的 字体 ， 通 用 的 字体 


(Arial, Courier New, Garamond, Times New Roman 及 中 文 宋体 ) 最 易 阅 读 ， 特 殊 字 体 用 于 


标题 效果 较 好 ， 
TERR. 


XE AB 


但 


是 不 适合 


正文 。 如 果 在 整 


玫 个 页 面 使 用 一 些 特 殊 字 体 ， 读 者 阅读 起 来 感觉 一 


特殊 字体 如 果 在 页 面 


i 上 大 量 使 用 ， 会 使 得 阅读 颇 为 费力 ， 浏 览 者 的 眼睛 很 快 就 会 


疲劳 ， 不 得 不 转移 到 其 他 页 面 。 
6. 一 致 性 原则 


通过 


HT 


VA 


对 网 站 的 各 种 元 素颜 
好 的 网 页 看 起 来 应 该 是 和 
设计 时 要 保持 一 


一 致 的 导航 


usnm 
性 3 
不 断 地 改版 ， 


上 板 和 一 成 不 变 ， 


7. 个 性 化 原则 


(1) 注意 网 络 文化 
不 同 于 传统 的 企 


先 ， 网 络 最 早 是 非 J 


在 计算 机 / 
ScE E 


个 互联 网 的 文化 是 一 
言 ， 创 造 一 种 休闲 的 、 
(2) 塑造 网 站 个 性 
网 站 的 整体 风格 包 
明 的 前 卫 网 站 ， 


可 口 可 乐 个 性 


: 幕 上 显示 而 没有 
， 许 多 人 是 在 家 ! 
种 休闲 的 、 
轻松 愉快 的 、 非 正式 的 氛 


fi 


BHJ 
致 性 ， 这 也 是 4 


站 显得 杂乱 无 章 ， 给 人 留 下 不 


上 上 商务 活动 ， 
E 式 性 、 非 商 
打印 


名 


色 、 字 体 、 图 形 及 空白 等 ) 使 用 一 定 的 规格 ， 使 得 设计 良 
或 者 说 ， 网 站 的 众多 单独 网 页 应 该 看 起 来 像 一 个 整体 。 网 站 


民 重 要 的 一 点 。 一 致 的 结构 设计 ， 可 以 让 浏览 者 对 网 站 的 形象 


设计 ， 可 以 让 浏览 者 迅速 而 又 有 效 地 进入 网 站 中 自己 所 需要 的 部 
;一致 的 操作 设计 ， 可 以 让 浏览 
， 并 且 让 整个 网 
`\ 意 味 着 多 


也 会 给 浏览 者 带 来 新 鲜 


快速 学 会 整个 网 站 的 各 种 功能 操作 。 破 坏 这 一 原则 ， 会 
恨 的 印象 。 当 然 ， 网 站 设计 的 一 至 
不 同 的 风格 ， 或 者 随 着 时 间 的 推移 


有 的 网 站 在 不 同 栏目 使 
的 感觉 。 


企业 电子 商务 网 站 要 符合 Internet 网 络 文化 的 
业 化 的 ， 只 是 科研 人 员 用 来 交流 信息 ; 其次， 网 络 信 
出 来 阅读 ， 网 络 上 的 交流 具有 隐蔽 性 ， 谁 也 不 知道 对 方 


要 求 。 
EP 


s! 


H 
A 


是 
的 真 


上 整体 气氛 表达 要 同 企业 形象 相符 合 ， 


或 网 吧 等 一 些 比较 休闲 、 比 较 随 意 的 环境 下 上 网 。 
非 正 式 性 的 、 轻 松 活泼 的 文化 。 在 网 站 上 使 用 幽默 
围 会 使 网 站 的 访问 量 大 增 


Ho 


因此 ， 整 
的 网 络 语 


并 应 该 很 好 地 体现 企业 CI. 
如 图 3-2 所 示 。 整 个 网 站 使 用 Flash FF 


如 
发 ， 颜 色 使 用 企业 CI 
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的 主 色调 红色 ， 加 上 明星 的 代言 


图 片 ， 使 得 整个 网 站 个 性 十 是 、 动 感 无 限 。 


Giebel She | MUGE | WERN 


UA 


图 3-2 nj 


可 乐 的 官网 


312 界面 设计 内 容 


界面 设计 是 为 了 满足 网 页 专业 化 、 标 准 化 的 需求 而 产生 的 对 网 页 的 使 用 界面 进 


eo0eeceoo 


Beverage Beret ts 


—— 


ATA cs 


1T 


Iu 


Z^ 


化 、 优 化 、 规 范 化 的 设计 分 支 。 且 体 包 括 网 页 框架 设计 、 按 钮 设计 、 面 板 设计 、 荣 单 设 计 、 


图 


标 设计 、 滚 动 条 设计 及 状态 栏 设计 。 
(1) 网 页 框架 设计 


网 页 的 框架 设计 比较 复杂 ， 涉 及 网 页 的 使 用 功能 ， 要 求 对 该 网 页 产品 的 程序 和 使 用 比 
较 了 解 。 这 就 需要 设计 师 有 一 定 的 网 页 跟 进 经 验 ， 能 够 快速 地 学 习 网 页 产品 ， 并 且 在 和 网 页 产 
品 的 程序 开发 员 及 程序 使 用 对 象 间 进行 共同 沟通 ， 以 设计 出 友好 的 、 独 特 的 、 符 合 程序 开发 原 


则 的 网 页 框架 。 


态 栏 预 留 位 置 。 设 计 '! 


E 


网 页 框架 设计 应 该 简洁 明快 ， 尽 量 少 用 无 谓 的 装饰 ， 应 该 考虑 节省 屏幕 空间 、 
各 种 分 辩 率 的 大 小 及 缩放 时 的 状态 和 原则 ， 并 且 为 将 来 设计 的 按钮 、 沫 站 
将 整体 色彩 组 合 进行 合理 搭配 ， 将 网 页 商标 放 在 


和 、 标 签 、 深 动 条 及 状 
显著 位 置 ， 主 沫 单 应 放 


在 左边 或 上 边 ， 滚 动 条 放 在 右边 ， 状 态 栏 放 在 下 边 ， 以 符合 视觉 流程 和 


(2) 网 页 按钮 设计 
网 


pa 


不 能 点 击 时 的 状态 及 独立 自动 变化 的 状态 。 按 钮 应 具备 简洁 的 


(3) 网 页 面板 设计 


玄 有 所 区 别 。 


网 页 面板 设计 应 该 具有 缩放 功能 ， 面 板 应 该 对 功能 区 间 划 分 清 


出 框 等 风格 匹配 ， 尽 量 节省 空间 ， 切 换 方便 。 
(4) 导航 菜单 设计 


] 户 使 用 心理 。 


蜥 ， 应 该 和 对 话 框 、 弹 


页 按钮 设计 应 该 具有 交互 性 ， 即 应 该 有 3 一 6 种 状态 效果 : 点 击 时 的 状态 、 鼠 标 放 在 
上 面 但 未 点 击 的 状态 、 点 击 前 鼠标 未 放 在 上 面 时 的 状态 、 点 击 后 鼠标 未 放 在 上 面 时 的 状态 、 
示 效 果 ， 应 能 够 让 使 
生 功 能 关联 反应 ， 群 组 内 按钮 应 该 风格 统一 ， 功 能 差异 大 的 按钮 应 ; 


j 者 产 


网 页 导航 的 二 级 菜单 是 经 常设 计 的 功能 ， 现 在 4 ij 
单 设计 能 和 操作 系统 的 菜单 相 溶 合 ， 如 有 选中 状态 和 未 选中 状态 ， 左 边 应 为 名 称 ， 
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民 多 平台 就 是 简单 的 文字 链接 ， 如 果 沫 


右边 应 为 


第 3 章 ， 电 子 商务 网 站 的 界面 设计 ] 


快捷 键 ， 如 果 有 下 级 菜单 应 该 有 下 级 箭头 符号 ， 不 同 功能 区 间 应 该 用 线条 分 制 ， 则 马上 能 够 
显示 出 菜单 的 与 众 不 同 的 地 方 。 

(5) 图 标 设计 
图 标 设计 是 方寸 艺术 ， 应 该 加 以 着 重 考 虑 视觉 冲击 力 ， 它 需要 在 很 小 的 范围 表现 出 
业 的 内 涵 ， 通 常 都 是 直接 使 用 企业 的 Logo。 很 多 图 标 设计 师 在 设计 图 标 时 使 用 简单 的 六 
色 ， 利 用 眼睛 对 色彩 和 网 点 的 空间 混合 效果 ， 做 出 了 许多 精彩 的 图 标 。 

(6) 滚动 条 及 状态 栏 设计 

滚动 条 的 作用 是 对 区 域 性 空间 的 固定 大 小 中 的 内 容量 进行 变换 ， 应 该 有 上 下 箭头 、 
动 标 等 ， 有 些 还 有 翻 页 标 。 状 态 栏 的 作用 是 对 网 页 当前 状态 进行 显示 和 提示 。 


E 


F 


3.2 po] ih E paie 流程 


在 所 有 的 页 面 设计 当中 ， 网 站 首页 设计 的 好 坏 是 一 个 网 站 成 功 与 否 的 关键 。 通 常人 们 
看 到 首页 就 会 对 网 站 初步 有 一 个 整体 的 感觉 ， 所 以 ， 首 页 的 设计 和 制作 知识 是 网 站 建设 的 重 
点 ， 也 是 难点 。 对 于 电子 商务 网 站 而 言 ， 首 页 设计 的 好 坏 直接 影响 到 网 站 的 运营 结果 ， 本 书 
以 实例 JadeWEN 婚纱 电子 商务 网 站 的 设计 制作 为 导向 ， 让 读者 掌握 整个 电子 商务 网 站 的 设 
计 与 制作 全 过 程 。 


3.24 草图 创意 原则 


设计 首页 版 面 的 第 一 步 是 设计 版 面 的 布局 ， 类 似 于 传统 的 报刊 杂志 编辑 一 样 ， 网 页 也 
需要 排版 布局 。 布 局 简单 地 说 就 是 一 个 设计 的 概念 ， 是 指 在 一 个 限定 的 范围 内 合理 地 安排 、 
布置 图 像 和 文字 的 位 置 ， 把 文章 、 信 息 按 照 一 定 的 顺序 陈列 出 来 ， 同 时 对 页 面 进行 装饰 和 美 
化 。 随 着 动态 网 页 技术 的 发 展 ， 网 站 建设 日 益 趋 向 于 Flash 等 网 页 。 当 然 网 页 版 面 的 静态 设 
计 仍 是 必须 学 习 和 掌握 的 ， 因 为 它们 的 基本 原理 是 相通 的 ， 领 会 要 点 ， 便 可 举一反三 ， 触 类 


B 子 商务 网 站 的 首页 ， 主 要 由 导航 、 各 功能 模块 、 版 权 及 店 标 等 内 容 组 成 。 传 统 
的 首页 格式 的 设计 并 没有 固定 的 规则 与 模式 ， 主 要 是 由 设计 师 和 用 户 来 共同 决定 的 。 值 得 
提 的 是 ， 上 面 提 到 的 功能 模块 一 个 都 不 能 少 。 


注意 : 
网 页 的 版 面 指 的 是 浏览 者 从 浏览 器 上 看 到 的 完整 页 面 (可 以 包含 框架 和 层 )。 由 于 每 个 
人 设置 的 显示 器 分 辨 座 有 所 不 同 ， 所 以 同一 个 页 面 可 能 出 现 800x600 像素 、1024x768 像素 


等 不 同 屏幕 尺寸 。 版 面 草案 的 形成 决定 着 网 页 的 基本 面貌 ， 相 当 于 网 站 的 初步 设计 创意 ， 通 
常 来 自 一 些 现 有 设计 作品 、 图 形 图 像素 材 的 组 合 、 改 造 及 加 工 。 


3.2.2. ”粗略 创意 布局 


粗略 创意 布局 是 指 在 版 面 草案 的 基础 上 ， 将 列举 的 功能 模块 安排 到 页 面 上 的 适当 位 
置 。 本 书 策划 的 网 站 首页 草图 如 图 3-3 所 示 。 
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注意 : 
这 里 必须 遵循 突出 重点 、 平 衡 协调 的 原则 ， 将 网 站 标志 、 主 菜单 、 商 品目 录 等 比较 重 
要 的 模块 放 在 最 显眼 、 最 突出 的 位 置 ， 然 后 再 考虑 次 要 模块 的 排放 。 


用 户 系统 
产品 发 布 系统 


通俗 地 讲 就 是 将 粗略 布局 精细 化 、 有 具体 化 。 在 布局 过 程 中 ， 需 要 遵循 的 原则 有 如 下 几 
条 。 

平衡 : 指 版 面 的 图 像 文字 在 视觉 份量 上 左右 、 上 下 几 个 方位 基本 相等 ， 分 布 勺 称 ， 能 
达到 安定 、 平 静 的 效果 。 

呼应 : 在 不 平衡 布局 中 的 补救 措施 ， 使 一 种 元 素 同时 出 现在 不 同 的 地 方 ， 形 成 相互 的 
联系 。 

对 比 : 利用 不 同 的 色彩 、 线 条 等 视觉 元 素 相互 并 置 对 比 ， 造 成 画面 的 多 种 变化 ， 从 而 
达到 丰富 视觉 的 效果 。 

MA: 足 密 关系 本 是 绘画 的 概念 。 丽 ， 是 指 画面 中 形式 元 素 稀 少 〈 甚 至 空白 ) 的 部 
D: 窗 ， 是 指 画 面 中 形式 元 素 繁 多 的 部 分 ， 在 网 页 设计 中 就 是 空白 的 处 理 运 用 。 太 满 、 太 
密 、 太 平均 是 任何 版 式 设 计 的 大 辟 ， 适 当 的 朴 密 搭配 可 以 使 画面 产生 节奏 感 ， 体 现 出 网 站 的 
格调 与 品位 。 

在 制作 网 站 时 ， 能 适当 地 把 以 上 的 设计 原则 运用 到 页 面 布 局 里 ， 就 会 产生 不 一 样 的 效 
果 。 例 如 : 网 页 的 白色 背景 太 虚 ， 则 可 以 适当 地 加 些 色 块 ， 网 站 的 版 面 零 散 ， 则 可 以 把 线条 
和 符号 串联 起 来 ， 版面 左 边 文字 过 多 ， 则 可 以 在 右边 插 一 张 图 片 来 保持 平衡 。 经 过 不 断 地 尝 
试 和 推 项 ， 一 个 设计 方案 就 会 渐渐 完善 起 来 。 
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根据 草图 布局 在 Photoshop 中 设计 的 实际 效果 如 图 3-4 所 示 。 在 图 3-4 所 示 的 网 站 设计 
中 ， 读 者 可 以 找到 相应 的 功能 模块 。 在 这 里 要 指出 的 是 ， 并 不 是 所 有 的 网 站 界面 都 是 千 篇 一 
律 的 ， 可 以 根据 销售 产品 的 需求 ， 再 设计 更 多 的 功能 
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图 3-4 ”网 站 设计 的 实际 效果 


网 站 首页 设计 实例 


现 以 上 述 首页 效果 的 设计 实现 为 例 ， 简 单 介绍 一 下 网 站 首页 设计 的 流程 。 操 作 步 又 中 
要 特别 注意 一 些 标准 ， 如 页 面 的 大 小 及 像素 ， 必 须 严 格 按照 要 求 来 设计 ， 否 则 在 发 布 网 页 时 
会 出 现 图 片 不 显示 或 者 网 页 过 大 等 错误 。 


3.3.1 首页 的 大 小 设计 


制作 网 站 的 网 页 大 小 是 有 一 定 规定 的 ， 因 为 浏览 者 浏览 网 页 的 显示 器 大 小 是 受 限 的 ， 
所 以 设计 的 网 页 大 小 要 匹配 显示 器 的 大 小 ， 埋 划 在 浏览 风 页 时 就 看 不 到 完 闽 的 效果 。 首 页 的 
大 小 设计 具体 步骤 如 下 

1) 打开 Photoshop CS6， 选 择 菜单 栏 上 的 “文件 ”一 “新 建 ”命令 ， 打 开 “ 新 建 ”对 话 
框 ， 在 对 话 框 中 的 “名 称 ” 文 本 框 中 输入 文件 名 “index”， 在 “宽度 ”文本 框 中 输入 
“766”， 单 位 为 “像素 ” 在“ 高度” 文本 框 输入 “1051”， 单 位 为 “像素 ”在 “分 辩 率 ” 文 
本 框 中 输入 “72”， 单 位 为 “像素 /英寸 ”把 “颜色 模式 ”设置 为 “RGB 颜色 ”， 单 位 为 “8 
Rr". 把 “背景 内 容 ” 设 置 为 “白色 ”。 其 他 的 设置 保持 不 变 ， 如 图 3-5 所 示 。 
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一 


x] 
pes — |22 FI BESERE (D)... 

: [1051 Bz ~ 
颜色 模式 (M) 
背景 内 容 (C) | 白色 


(&) SR 


SREATH (O): | sRGB IEC61966-2.1 
TRREIEEEEOO: | 方形 像素 


图 3-5 界面 


2) 打开 图 层 后 双击 工具 栏 中 的 “缩放 工具 ”按钮 鸭 ， 或 者 同时 按 下 Cti) ) 组合 
键 ， 使 场景 按 100% 的 比例 显示 ， 此 时 的 效果 如 图 3-6 所 示 。 


á&c) Bien MEO ZFU) BHS 


Hl 


性 设置 


WHSODACUAN S RR 


CI 


^. 
1, 
T. 
P, 
1 
^, 
s 
S. 
^E 
[ 
Di 
x. 
Q 
d* 
I2! 
emo 


35:2:309]0 FP p 


图 3-6 场景 100% 显 示 效 果 


注意 : 

大 部 分 浏览 者 是 在 800x600 或 者 1024x768 的 分 辩 率 模式 下 浏览 网 页 ， 所 以 制作 网 页 
的 时 候 ， 要 首先 考虑 大 众 需求 。 由 于 用 浏览 器 浏览 网 页 的 时 候 需 要 网 页 滚动 条 ， 所 以 实际 的 
网 页 宽度 不 能 达到 800 像素 ， 一 般 为 780 像素 。 而 分 辨 率 设 置 小 了 会 看 不 清 ， 设 置 大 了 会 影 
响 访问 的 速度 ，72 像素 /英寸 的 分 辨 率 是 最 佳 设 置 ， 这 样 设 计 出 来 的 网 页 效果 在 显示 器 中 可 
以 看 得 很 清楚 。 
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3.3.2 ”页 面 框架 的 搭建 


设计 网 页 的 框架 ， 简 单 地 说 就 是 在 首页 上 设计 好 整体 的 背景 框架 效果 ， 以 方便 后 面 放 
置 一 些 实际 内 容 ， 比 如 前 面 提 到 的 会 员 系 统 、 新 闻 系 统 及 网 上 购物 车 等 ， 下 面 就 实现 网 页 的 
框架 设计 : 

D 在 建立 了 网 站 首页 大 小 后 ， 在 “图 层 ” 面 板 中 单 击 “创建 新 组 ”按钮 厦 ， 新 建 一 个 
文件 夹 “ 组 1?， 如 图 3-7 所 示 。 

2) 用 鼠标 左 键 双 击 文件 夹 名 称 ， 在 “名 称 ” 文 本 框 中 输入 新 命名 的 名 称 “ 版 权 ” H 
他 的 选项 保持 默认 值 ， 如 图 3-8 所 示 。 


+ NEAR: 100% 


填充 : 100% 


图 3-7 创建 新 组 图 3-8 设置 组 名 称 


专家 指导 : 
使 用 Photoshop 设计 的 所 有 元 素 都 是 放置 在 图 层 上 的 ， 可 是 当 设 计 的 元 素 很 多 时 ， 就 会 
分 不 清 元 素 到 底 是 放 在 哪个 图 层 上 的 ， 因 此 需要 将 图 层 分 别 命名 并 按 功能 分 类 ， 这 样 方便 日 
后 的 维护 与 更 改 。 


3) 在 “图 层 ” 面 板 中 单 击 “ 创 建新 图 层 ” 按 钮 图 ， 在 “版 权 ” 文 件 夹 里 ， 自 动 创建 一 
个 新 的 “图 层 1”， 如 图 3-9 图 所 示 。 

4) 双击 “图 层 1” 文 字 ， 在 “名 称 ” 文 本 框 中 输入 新 命名 的 名 称 “ 底 纹 ” 其 他 的 保持 
默认 值 ， 如 图 3-10 所 示 。 


eT 


* SB . OO w Ese 
m NERE: 100% J PEAR: 100% 


HWE: m 8 填充 : 10095 忌 UI:m. on. Um 


下 := 


图 3-9 新 建 的 “图 层 1” 图 3-10 设置 “图 层 属性 ”名 称 
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5) 执行 菜单 栏 上 的 “文件 ”一 “打开 ”命令 ， 弹 出 “ 打 姑 


F ”对 话 框 ， 单 击 “ 碍 找 范 


后 面 的 下 拉 三 角 按 钮 圈 ， 选 择 光 盘 中 的 源 文件 shop/psd / 底 纹 bmp， 如 图 3-11 所 示 。 
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6) ği 


i 


[T 


index. psd 
固 lozo jpe 


图 


3-11 设置 


“打开 ”对 话 框 


H” 


“打开 ”按钮 ， 在 Photoshop 软件 中 打开 准备 的 网 页 底 纹 效果 ， 如 图 3-12 所 示 。 


[3 


SINE LIS 


Bnuw*8NNHENNSEJX XS 


Ner P S 


PB: oF 


< HL.bmp @ 66.799 (RGB/8) x 


K 3-12 打 ] 


于 的 底 纹 效果 


LUE AL NE C Nd 
o m E] 
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7) 按 下 全 选 组 合 键 〈Ctrl+A)， 打 开 底 纹 图 片 ， 


纹 图 片 的 效果 ， 再 单 


iH 


了 同时 按 下 (Ctrl+C) 组 合 键 复制 底 


+ 


前 面 设计 的 index.psd 文档 ， 切 换 回 它 的 编辑 窗口 ， 用 鼠标 单 击 选 


择 “ 底 纹 ” 图 层 ， 再 执行 《Ctrl+V)》 组 合 键 ， 即 可 以 将 图 片 复 制 到 建立 的 图 层 上 ， 效 果 如 


3-13 所 示 。 


PEU 


" - 


HA*E*SNNIRENN 


E] NI 


图 3-13 复制 底 纹 效果 


制 的 漂亮 底 纹 用 来 做 什么 呢 ? 网 页 设计 注重 龙头 凤 尾 ， 意 思 是 说 网 页 的 前 半 部 分 和 
后 半 部 分 需要 用 精美 的 背景 来 衬托 ， 这 样 设计 出 来 的 网 页 会 比较 精美 。 


辅助 线 先 划分 出 整个 网 页 的 龙头 和 凤 尾 的 大 小 。 单 击 工 具 栏 中 的 “ 移 


8) 接 下 来 就 是 月 


ICR” ak, M 


| 


*. 

a 
a 
" 
ET 


的 标尺 位 置 向 下 拉 五 条 辅助 线 ， 如 图 3-14 所 示 。 


图 3-14 设置 5 条 


甫 助 线 
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9) 


图 


HJ ^r 


片 的 效果 。 再 执行 《Ctrl+V》 组 合 键 ， 则 “图 层 1” 将 被 自动 创建 ， 


图 3-15 所 示 。 


11) 单 击 “ 确 定 ” 按 钮 ， 则 在 “ 医 


1 副本 ”图 


W 6 
AE 


3-15 


“图 


层 ” 面 板 


层 ， 将 其 放置 在 第 4 条 和 第 


“-30 2 E 


AN 
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也 的 保持 默认 值 。 对 话机 


工具 栏 中 的 “移动 工具 ”按钮 辟 ， 将 “图 


E» AA 
E A 


复制 图 屋 1 


层 1” 拖 放 到 第 
打开 “复制 图 层 ” 对 话 框 ， 如 图 3-16 所 示 。 


鼠标 拖 动 “ 底 纹 ” 图 层 ， 至 倒数 第 2 条 辅助 线 下 ， 单 击 工具 箱 中 的 “矩形 选 框 工 


具 ” 国 按钮 ， 拖 动 鼠 标 选择 倒数 第 1 条 和 第 2 条 间 的 区 域 ， 同 时 按 下 (Crte) 组合 键 ， 复 
制 矩 形 选 框 内 的 底 纹 
此 时 的 “图 层 ” 面 板 如 
10) TÉ] 


执行 “复制 图 


条 辅助 线 的 上 头 ， 


^0): BSA Ca 


目标 
xao) 
mw E) 


第 


5 All 


图 3-16 


层 1” 上 自动 生成 “图 


R” ITHNE 


c 


“复制 图 


层 1 副本 ”图 层 。 拖 动 “ 图 层 


色相 /饱和 度 ” 命 令 ， 打开 “色相 / 饱和 度 ” 对 话 框 ， 在 “明度 ”文本 框 中 输入 


E 的 设置 如 图 


色相 /饱和 度 


3-17 所 示 。 


DW, 


再 执 行 菜单 栏 “图 像 ”一 “ 调 


图 3-17 ik 


整 色相 明度 值 
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12) 单 击 “ 确 定 ” 按 钮 ， 按 住 (Shift) 键 ， 同 时 选择 制作 的 三 个 图 层 ， 执 行 〈Ctrl+E》 
组 合 键 ， 将 图 层 合并 成 一 个 图 层 ， 并 命名 为 “ 底 纹 ”。 此 时 网 页 的 底 纹 应 用 效果 已 经 出 来 
了 ， 如 图 3-18 所 示 。 


PS ZAP aie Ben A20) 


prouw Puof* 


index psd O 54.9%% (if, RGBJO) * = 


LE 


v. 
*. 
t 
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H^* ut^ NI PN 


sl pP N 


BI 3-18 底 纹 应 用 效果 


13) 在 “图 层 ” 面 板 中 单 击 “ 创 建新 图 层 ” 按 馈 辆 |， 在 “版 权 ” 文 件 夹 里 ， 自 动 创建 
一 个 新 的 “图 层 1”。 用 鼠标 左 键 双击 选择 “图 层 1” 打 开 快捷 菜单 ， 在 “名 称 ” 文 本 框 中 输 
入 “导航 底 纹 ” 如 图 3-19 所 示 。 

14) 单 击 工具 箱 中 的 “和 矩形 选 框 工具 ”图 按钮 ， 然 后 拖 动 “ 导 航 底 纹 ” 图 层 ， 将 
署 在 第 2 条 和 第 3 条 辅助 线 之 间 的 绘制 矩形 选区 ， 绘 制 的 效果 如 图 3-20 所 示 。 


放 


图 3-19 命名 新 建立 的 图 层 图 3-20 ZABERA 


xi 
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15) 执行 菜单 栏 “ 有 编辑” 一“ 填充” 命令， 打开“ 填充 ”对 话 框 ， 单 击 选择 “使 用 ” 
后 面 的 下 拉 三 角 按钮 ， 在 打开 的 下 拉 菜 单 中 选择 “颜色 ...” 选 项 ， 如 图 3-21 所 示 。 

160 选择 选项 后 打开 “ 拾 色 器 ”对 话 框 ， 在 这 里 设置 颜色 值 为 “者 00000”， 对 话 框 的 
设置 如 图 3-22 所 示 。 单 击 “ 和 确定” 按钮， 返回“ 填充” 对 话 框 ， 再 单 击 “确定 ” 按 钮 ， 将 
选区 填充 上 暗 红 色 ， 设 置 后 的 效果 如 图 3-23 所 示 。 


RET CARE) 


BAU): | 前 景色 


背景 色 
颜色 
图 案 


qmm pU EET 
r 混合 


ERM): | 历史 记录 


WEAR (OQ): 黑色 
癌 保留 透明 区 | 50% RE 
白色 


$ $355 


ARR PLACE 


BDHMSBeRWNNIEM 


ENSE O 


文档 :2309M/5.36M LE 


图 3-23 ”填充 颜色 后 的 效果 


17) 单 击 “ 确 定 ” 按 钮 完成 描 边 操作 ， 网 页 上 下 的 结构 已 经 划分 出 来 ， 接 下 来 就 是 设 
计 中 间 白 色 这 一 块 的 竖 疝 结构 。 从 图 3-24 可 以 看 出 ， 页 面 的 内 容 显示 部 分 是 划分 成 两 大 块 
的 ， 左 边 灰 色 部 分 用 来 放置 购物 车 、 会 员 系 统 及 搜索 系统 ， 右 边 白 色 域 是 用 来 显示 新 闻 和 产 
品 的 。 
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购物 车 — Orm 


z.m 
x2. bos 


新 闻 系 统 

9 [TIT 
会 员 系 统 i 

4 x53 

BH rs taen 
搜索 系统 — A ARP: m 51 
—— : < z Ža 
LI od Ps 


版 权 区 域 


图 3-24 中 间 部 分 的 设计 规划 


18) 在 “图 层 ” 面 板 中 单 击 “ 创 建新 图 层 ” 按 钮 图 日 ， 在 “版 权 ” 文 件 夹 里 自动 创建 一 
个 新 的 “图 层 1”， 用 鼠标 左 键 双击 选择 “图 层 1”， 在 “名 称 ” 文 本 框 中 输入 “页 面 内 容 ”。 
单 击 工具 箱 中 的 “和 矩形 选 框 工 具 ” 转 按钮 ， 然 后 拖 动 “导航 底 纹 ”图 层 ， 将 其 放置 在 第 3 
条 和 第 4 条 辅助 线 之 间 的 左 侧 绘制 矩形 选区 ， 绘 制 的 效果 如 图 3-25 所 示 。 


文档 :2.30M/5.96M > 


图 3-25 绘制 矩形 选区 
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19) 执行 菜单 栏 “ 有 编辑” 一“ 填充” 命令， 打开“ 填充 ”对 话 框 ， 单 击 选择 “使 用 ” 
后 面 的 下 拉 三 角 按钮 ， 在 打开 的 下 拉 菜 单 中 选择 “颜色 ...” 选 项 。 

200 选择 选项 后 打开 “ 拾 色 器 ”对 话 框 ， 在 这 里 设置 颜色 值 为 “#f0f0f0” 对 话 框 的 设 
置 如 图 3-26 所 示 。 单 击 “ 确 定 ” 按 钮 返回 “填充 ”对 话 框 ， 再 单 击 “ 确 定 ” 按 钮 ， 将 选 
区 填充 上 灰色 的 效果 如 图 3-27 所 示 。 


图 3-27 ”填充 颜色 后 的 效果 


21) 执行 《Ctrl+tD》 组 合 键 取消 选择 。 执 行 菜单 栏 上 的 “文件 ”一 “打开 ”命令 ， 弹 出 
“打开 ”对 话 框 ， 单 击 “ 查 找 范 围 ” 后 面 的 下 拉 三 角 按 钮 圈 ， 选 择 光盘 中 的 源 文 件 shop/psd / 
购物 车 .psd， 如 图 3-28 所 示 。 
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22) 单 击 “ 打 开 ” 按 钮 ， 在 Photoshop 软件 中 打开 准备 的 购物 车 图 片 ， 如 图 3-29 所 示 。 


文件 名 0D: [PBE ?td x] 
xem. [mte * 


图 3-29 ”打开 的 底 纹 效果 


IMI 


图 3-28 设置“ 打开” 对话 


23) 按 下 《Ctrl+A) 组 合 键 全 选 购物 车 图 片 ， 再 同时 按 下 (Ctbec) 组 合 键 复制 图 片 的 
效果 ， 再 单 击 index.psd 文档 ， 切 换 回 它 的 编辑 窗口 ， 用 鼠标 单 击 选 择 “ 页 面 内 容 ” 图 层 ， 
再 执行 《Ctrl+V》 组 合 键 ， 即 可 以 将 图 片 复制 到 新 建立 的 “图 层 1” 上 ， 单 击 工具 栏 中 的 


“移动 工具 ”按钮 失 ， 将 购物 车 拖 放 到 前 面 创 建 的 灰色 底 纹 的 左上 角 ， 此 时 的 效果 如 图 3-30 
所 示 。 然 后 按 住 〈Shift〉 键 选择 “页 面 内 容 ” 图 层 ， 再 执行 《Ctrl+E〉 键 将 这 两 个 图 层 合并 


成 一 个 图 层 。 


[Ps] index.psd € 100% (AMAZ, RGB/8) * 


@ ann 


图 3-30” 拖 放 购 物 车 后 的 效果 


db Ed 


24) 同样 在 “页 面 内 容 ” 图 层 ， 右 边 的 白色 区 域 上 合成 图 3731. 所 示 的 背景 效果 。 
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[^] index.psd & 71.6% [版权 , RGB/8) * 


图 3-31 完成 网 页 的 整体 背景 框架 设计 后 的 效果 


到 这 一 步骤 ， 网 页 的 框架 结构 就 设计 完成 了 。 需 要 说 明 的 是 框架 的 设计 并 不 是 一 成 不 
变 的 ， 读 者 可 以 根据 自己 的 审美 观 适当 地 做 一 些 调整 ， 做 出 适合 自己 开设 网 站 的 风格 即 可 。 


3.3.3 ”网 站 标志 的 摆 放 


前 面 学 习 了 网 站 首页 框架 的 搭建 ， 下 面 就 要 仔细 地 讲解 一 下 首页 框架 里 面具 体内 容 的 
规划 设计 ， 它 包括 店 标的 摆 放 、 页 面 内 容 的 设计 、 网 站 版 权 的 编辑 及 具体 内 容 设计 等 操作 。 
通过 这 些 内容 的 细 化 定位 ， 可 以 让 首页 的 框架 内 容 更 加 丰富 、 直 观 。 通 常情 况 下 ， 一 个 网 站 
必须 拥有 自己 的 网 站 标志 简称 logo)， 实 例 中 的 logo 已 经 在 光盘 中 为 大 家 准备 好 。 

往 网 页 中 放置 logo 的 操作 如 下 : 

1) 接 图 3-31 完成 的 框架 搭建 设计 操作 ， 单 击 工具 箱 中 的 “移动 工具 ”按钮 看 ， 在 “图 
层 ” 面 板 中 单 击 选择 “版 权 ” 文 件 夹 ， 然 后 再 单 击 “ 创 建新 组 ”按钮 天 |， 新 建 一 个 文件 夹 
“组 1”， 用 鼠标 左 键 双击 “组 1” 文 件 来， 在 “名 称 ” 文 本 框 中 输入 新 命名 的 名 称 “ 网 站 导 
Wi". 如 图 3-32 所 示 。 

2) 单 击 “确定 ”按钮 , "4H 1” 文件 夹 名 变 为 了 “网 站 导航 ”， 在 “图 层 ” 面 板 中 单 击 


88 


"eT E, dE *PISSSHyUT SCITECH 


层 ” 面 板 如 图 3-33 所 示 。 


自动 创建 一 个 新 的 “图 


第 3 章 ， 电 子 商务 网 站 的 界面 设计 ] 


图 3-32 设置 “组 属性 ”对 话 框 


3) 执行 菜单 栏 上 的 “文件 ”一 “打开 ”命令 ， 调 出 
围 ” 后 面 的 下 拉 三 角 按钮 国 ， 选 择 光 盘 中 
fF“ 打开 ”按钮 ， 在 Photoshop 软件 中 打 玫 


E 


o 


a osram 


图 3-33 


m 


prà 
SEGR 
JADE WEN 
index psà 1 


ER tap 


图 3-34 设置 “打开 ”对 话 


IHI 


4) 按 下 全 选 (Ctl-A) HG, F 


店 标 图 片 的 效果 。 再 单 击 前 面 设计 的 index.psd 文档 ， 切 换 
择 “ 图 层 1” 图 层 ， 再 执行 《CtrlHV》 组 合 键 ， 即 可 以 将 图 
EE UU "logo", 单 击 工具 箱 中 的 “移动 工具 ”按钮 古 


的 效果 如 图 3-36 所 示 。 


TH 


F 店 标 图 片 。 再 同 


创建 图 层 后 的 “图 层 ” 


层 1”， 此 时 “图 


面板 


“打开 ”对 话 框 ， 单 击 “ 查 找 范 


的 源 文件 shop/psd /logo.jpg， 如 图 3-34 Drs. À 


3522 VA ix 


JADE WEN 


bridal couture 


图 3-35 打开 的 店 标 效果 


时 按 下 《〈Ctr+C》 组 合 键 ， 复 制 


! 


回 它 的 编辑 窗口 ， 用 鼠标 单 击 选 
片 复制 到 建立 的 图 层 上 。 


同时 将 


将 店 标 拖 放 到 左上 4/ 


d» 此 时 


89 


[ 赢 在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


v 
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SAMNiP NS 


Ur REN NE 


3.3.4 广告 栏 的 设计 


一 个 电子 商务 网 站 ， 若 希望 它 的 广告 宣传 起 到 举 


ig om 和 a 


图 3-36 WCE logo 后 的 效果 


I. 


AC 


轻重 的 作用 ， 这 就 要 用 到 广告 栏 。 广 告 


栏 的 功能 是 展示 网 站 形象 ， 一 般 都 是 放 一 些 网 站 经 营 产品 的 经 营 理念 的 广告 语 ， 也 有 的 是 通过 
实例 中 以 网 站 经 营 广告 中 的 一 段 话 来 表现 。 


Flash 软件 制作 成 产品 的 动画 展示 。 


具体 的 制作 步骤 如 下 : 


D 首先 再 次 从 光盘 中 导入 “新 娘 ” 素 材 图 


= PAAR: 10% m 


: 100% = 


图 3-37 


导入 “新 娘 ” [E 


片 ， 并 放置 在 店 标 下 面 ， 过 程 同 3.3.3 Wm 
又 2 一 4 中 的 操作 ， 此 时 的 图 层 设 置 和 效果 如 图 3-37 所 示 。 


片 的 


图 


层 设置 和 效果 


20 在 “图 层 ” 面 板 中 ， 单 击 “ 创 建新 图 层 ” 按 钮 国 ， 在 “网 站 导航 ”文件 夹 里 自动 创 
建 一 个 新 的 “图 层 1?， 将 其 命名 为 “分 割 线 ”。 在 默认 输入 法 状态 下 ， 分 别 按 下 D) 和 


OO 快捷 键 ， 设 置 前 景色 为 白色 ， 然 后 再 单 击 工具 箱 中 的 “直线 工具 ”按钮 国 ， 在 工具 预 
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Vu 


第 3 


设 状态 栏 上 单 击 选择 “像素 ”下 拉 列 表 项 ， 在 “粗细 ”文本 框 输入 值 为 1 像素 ， 其 他 保持 默 
认 值 ， 设 置 如 图 3-38 所 示 。 


Z REAR: 100% [v7 7 MeS LI ME 


图 3-38 设置 “直线 工具 ”的 预选 项 


3) 按 住 〈Shift〉 键 ， 拖 动 鼠 标 三 次 在 “分 制 线 ” 图 层 上 绘制 三 条 白 线条 ， 效 果 如 图 3-39 
所 示 。 这 里 设计 白色 线条 ， 是 为 了 划分 图 片 和 文字 所 占 的 空间 。 


SENK 


JADE WEN 


图 3-39 绘制 的 白色 直线 效果 


4) 单 击 工 具 箱 中 的 “ 直 排 文字 工具 ”按钮 园 ， 在 工具 预 设 状态 栏 上 选择 字体 为 “ 汉 仪 
细 行 楷 简 ” 设置 字号 为 “14 点 ”， 模式 为 “平滑 ”设置 如 图 3-40 所 示 。 


- IT we 属 = 4 点 = aa R S EN MEE | 


图 3-40 设置 直 排 文字 工具 的 属性 


专家 指导 : 

如 何 安 装 需 要 的 特殊 字体 ，Photoshop 调用 的 一 些 特殊 字体 是 需要 安装 的 ， 如 上 面 使 用 
到 的 “ 汉 仪 细 行 楼 简 ” 字 体 ， 读 者 可 以 从 网 上 搜索 该 字体 ， 下 载 并 放置 到 CNWINDOWS' 
Fonts 路 径 下 即 可 ， 如 图 3-41 所 示 。 


5) 在 绘制 的 白色 直线 之 间 单 击 鼠 标 然后 输入 标题 文字 “甘草 嫁 衣 的 见证 下 ， 幸 福 从 这 
里 开始 ..”， 输 入 完成 后 单 击 文本 工具 预 设 状态 栏 上 的 “提交 当前 所 有 编辑 ”按钮 国 ， 完 成 
输入 文字 后 的 效果 如 图 3-42 所 示 。 


wap HEV BRO IRV Who 


-0O à Ds Er 回国 回国 


à 3 x» 3» 
DEM ZEN . QoS ; Rec *ost 
à ð 
d GUN GUUNLD aR, > 
a a a d JAPE WES 


n 杂书 Fran? iR 
uwelype)  (TrueIype) (relype) B Orue GrueType) Bold 


图 3-41 特殊 字体 的 安装 图 3-42 输入 标题 文字 后 的 效果 
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6) 然后 再 单 击 工具 箱 中 的 “ 横 排 文字 工具 ”按钮 也 ， 在 工具 预 设 状态 栏 上 选择 字体 为 
“宋体 ” 设置 字号 为 “12 A”, 模式 为 “无 ” 如 图 3-43 所 示 。 


图 3-43 ”设置 文字 输入 属性 


在 文字 标题 后 面 输入 如 下 说 明文 字 : 

干 万 个 美好 的 懂 避 和 梦想 ， 此 刻 进 发 出 无 限 激情 和 力量 ， 开 启 爱 恋 交 蔡 的 心灵 之 窗 ， 
闪烁 浪漫 神奇 的 璀璨 光芒 。 硕 刻 凝 固 人 挚爱 唯美 的 精彩 瞬间 ， 点 亮 浪漫 如 诗 的 绝 佳 篇 章 。 人 惊喜 
与 感动 的 温 亿 并存 ， 化 作 天 长 地 入， 指引 新 人 携手 步 入 神圣 的 婚姻 殿堂 。 

7) 输入 完成 后 再 选择 第 一 个 文字 “ 千 ” 设 置 其 字体 为 “18 点 ”最 后 单 击 文本 工具 预 
设 状 态 栏 上 的 “提交 当前 所 有 编辑 ”按钮 Y， 输 入 并 设置 文字 后 的 效果 如 图 3-44 所 示 。 


图 3-44 输入 并 设置 文字 后 的 效果 

8) 到 这 一 步 网 站 首页 的 上 部 分 已 经 设计 完成 ， 用 于 链接 部 分 的 导航 栏目 在 这 里 是 不 需 
要 单独 设计 的 ， 我 们 将 在 后 面 的 章节 中 用 PHP 编辑 直接 设计 出 来 ， 但 在 设计 的 时 候 为 了 查 
看 整个 网 页 的 实际 效果 ， 暂 时 把 导航 的 文字 先 输入 到 相应 的 位 置 ， 这 里 单 击 工具 箱 中 的 “ 横 
排 文 字 工 具 ” 按 钮 也， 在 logo 后 面 输入 导航 的 文字 ， 效 果 如 图 3-45 所 示 。 


EK 


JADE WEN 


图 3-45 输入 导航 文字 后 的 效果 


3.3.5 ”功能 模块 设计 


前 面 所 提 到 的 框架 模块 区 域 ， 就 是 用 来 安排 首页 内 容 的 。 首 页 所 显示 的 内 容 是 相当 重 
要 的 ， 因 为 访问 者 进入 网 站 首先 看 到 的 是 首页 ， 首 页 上 的 内 容 是 否 精 彩 、 能 否 引 和 信 注 目 ， 在 
一 定 程度 上 会 影响 访问 者 是 否 继续 浏览 。 在 首要 界面 设计 中 ， 不 需要 把 各 部 分 的 内 容 完 整地 
加 入 ， 只 需 画 出 内 容 页 面 的 背景 图 片 。 到 这 一 步 又 完成 了 图 3-46 所 示 的 设计 效果 ， 网 页 的 
设计 部 分 工作 已 经 基本 完成 。 

为 了 达到 预览 的 效果 ， 需 要 输入 实际 的 文字 内 容 和 小 图 标 进行 编排 效果 。 这 里 基本 上 
是 一 些 输入 文字 和 引用 光盘 中 shop/psd/ 文 件 夹 里 面 素材 的 操作 ， 由 于 该 操作 在 上 面 的 步 双 
己 经 做 了 上 有 具体 的 介绍 ， 这 里 就 不 再 重复 ， 设 置 后 的 效果 图 如 4-47 所 示 。 读 者 也 可 以 直接 打 
Jf shop/psd/index.psd 进行 观看 。 
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图 3-46 


对 于 该 实例 还 


| 栏目 说 明 图 


功能 菜单 


E 
Tu 


设计 完成 后 的 网 页 结构 效果 


要 设计 网 站 的 次 级 页 面 ， 


片 和 显示 相应 内 容 的 区 域 组 成 ， 北 


FH. 
N 


项 


3-47 ”编排 内 容 页 的 整体 效 


这 里 的 次 级 页 面 的 效果 如 图 3-48 所 示 ， 主 要 


设计 得 简洁 大 方 ， 这 里 也 不 做 具体 的 介 
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到 这 


步骤 网 站 的 网 页 美工 就 设计 


完毕 


E, nf 


显示 新 闻 列表 


四 的 效果 
以 进入 下 一 步 的 首页 图 


片 分 割 工作 。 
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3.4 | 网 站 使 用 图 片 的 分 割 


接 下 来 就 是 利用 Photoshop 软件 ， 对 设计 好 的 页 面 图 片 进行 分 割 操作 。 
其 中 图 片 分 割 工具 包含 了 以 下 两 个 工具 :“ 切 片 工具 ” 国 和 “切片 选择 工具 ” 国 . 

“切片 工具 ”按钮 国 ， 使 用 它 可 以 方便 地 对 图 片 进 行 切片 。 

“切片 选择 工具 ”按钮 国 ， 通 过 它 可 以 方便 地 选取 切片 好 的 图 片 。 

这 两 个 工具 是 Photoshop 所 独 有 的 ， 使 用 方便 ， 当 进行 第 一 次 切片 后 ， 它 可 以 根据 用 户 
第 一 次 切片 的 大 小 调整 剩 下 图 像 的 切片 大 小 。 

专家 指导 

如 果 在 制作 的 时 候 没 有 进行 切片 处 理 ， 浏 览 的 就 是 整个 图 片 ， 打 开 网 页 的 速度 就 会 很 
慢 。 在 遇 到 这 种 问题 的 时 候 ， 通 常 是 将 图 片 进 行 切片 处 理 。 EEEa SER 
一 部 分 一 部 分 的 出 现 ， 实 现 快 速 下 载 。 另 外 ， 应 该 尽量 减少 图 片 的 使 用 。 网 页 上 的 文字 浏览 
速度 要 比 图 片 快 得 多 ， 在 能 够 实现 同样 效果 的 前 提 下 ， 用 文字 代替 图 片 将 大 大 提高 网 站 的 济 
览 速度 。 


344 ”图片 切片 过 程 


下 面 就 开始 用 Photoshop CS6 切片 工具 切片 界面 。 
1) 启动 Photoshop CS6。 选 择 荣 单 栏 上 的 “文件 ”一 “打开 ”命令 ， 打 开 前 面 所 做 的 首 
页 平面 效果 index.psd 文件 ， 如 图 3-49 所 示 。 


» Ep ras 

» OTANI FRAT 
»ARRNEXBEENCSTAMS 
» Widgittkkeoxtvo6oB. 
» FOTUCERINUCE HN 

» WE -e7US" witeum 


图 3-49 打开 将 要 切片 的 首页 图 

2) 由 于 网 站 后 面 的 网 页 在 编排 时 ， 使 用 的 是 一 些 图 片 和 小 图 标 ， 所 以 要 将 一 些 调用 的 
动态 文字 关闭 显示 ， 这 里 通过 单 击 “ 图 层 ” 面 板 上 相应 图 层 前 面 的 “指示 图 层 可 视 性 ”按钮 
钨 ， 即 可 以 关闭 在 界面 中 的 显示 。 图 3-50 所 示 为 关闭 导航 文字 的 显示 。 


94 


第 3 章 ”电子 商务 网 站 的 界面 设计 | 


3) 单 击 工具 箱 中 的 “和 矩形 选 框 工具 ” 国 按 钮 ， 在 “页 面 内 容 ” 图 层 上 ， 拖 放 鼠 标 将 一 些 产 
品 显示 的 效果 选择 选区 ， 然 后 按 下 《Delete〉 键 删除， 最 后 将 首页 编辑 成 图 3-51 所 示 的 效果 。 


BOTHA 


$ 不 透明 度 : 100% 


T ”2013 年 3 月 21 日 星 ... 


T č miei. 
W 
指示 图 层 可 见 性 
NEN — Rui 


2 e ^M E 瑟 个 


图 3-50 关闭 导航 文字 的 显示 图 3-51 删除 多 余 图 片 和 文字 后 的 显示 效果 


4) 开始 切片 logo 所 在 行 的 图 片 ， 单 击 工具 箱 中 的 “切片 工具 ”按钮 国 ， 从 场景 的 左 
上 角 拉 到 logo 的 右 下 角 ， 如 图 3-52 所 示 ， 图 中 绘制 虚线 框 的 就 是 切片 大 小 ， 切 片 后 左上 角 
会 有 一 个 国 回 赂 标 显示 。 


图 3-52 导航 背景 的 切片 效果 


5) 切片 后 再 将 Banner 图 片 切割 成 两 个 图 片 ， 其 中 “新 娘 ” 为 一 张 ， 说 明文 字 为 另 一 
张 ， 这 样 方便 后 面 我们 将 文字 部 分 制作 成 Flash 动画 。 切 片 的 效果 如 图 3-53 所 示 。 


352205 
EN 


图 3-53 切片 Banner 图 片 
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6) 切片 购物 车 的 背景 图 片 。 保 持 “切片 工具 ”按钮 国 为 选中 状态 ， 从 小 导航 左边 的 背 
景 开始 ， 分 别 切片 出 3 个 有 用 的 切片 ， 如 图 3-54 Pros. 


BEN 


更 多 


图 3-54 切片 小 导航 


专家 指导 : 

最 好 使 切片 选区 的 下 边框 与 周边 的 线条 重合 。 如果 划分 切片 区 域 不 够 准确 的 话 ， 先 用 
放大 镜 工具 进行 放大 ， 再 选中 “切片 选择 工具 ”[ 进 行 调整 。 在 切片 的 时 候 要 注意 切片 的 原 
则 : 所 有 带 转 角 的 背景 图 片 ， 都 需要 单独 切 成 一 小 片 ， 这 样 方便 后 面 网 页 的 设计 编排 。 


7) 切片 新 闻 前 面 的 闪 符 号 。 单 击 工 具 箱 中 的 “缩放 工具 ”按钮 出 ， 然 后 单 击 鼠 标 左 键 
拖 放 ， 选 择 第 一 条 新 闻 前 面 的 小 花 片 并 放大 ， 最 后 单 击 工具 箱 中 的 “切片 工具 ”按钮 园 并 
拖 放 鼠标 ， 切 片 符号 效果 如 图 3-55 所 示 。 


图 3-55 切片 符号 效果 
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8) 切片 新 闻 图 片 。 在 这 里 ， 要 把 新 闻 图 片 单 独 切 开 ， 在 


的 大 小 为 模板 ， 
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T 


后 面 的 章节 中 我 们 将 以 此 图 片 


设计 


些 图 片 在 首页 实现 动态 的 切换 效果 ， 


如 图 3-56 所 示 。 


固 挚 爱 唯美 的 精彩 瞬 RE nA ER. 08 5518 
smt. tE 册 入 ， 指 引 新 人 携手 步 入 神圣 的 婚姻 
m. 


9) 最 后 切片 版 权 说 明 。 保 持 “ 切 片 工具 ”按钮 国 为 选中 


标 切 片 出 两 个 和 


E 形 切片 


图 3-56 切片 新 闻 图 片 


区 域 即 可 ， 如 图 3-57 所 示 。 


状态 ， 在 场景 的 左下 角 拖 动 鼠 


LIF INE — WE. 3L 


bz EA LIH [ 


图 3-57 切片 后 的 效果 
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3.4.2 ”发 布 切片 效果 


到 这 里 ， 切 片 工 作 基 本 完成 。 
具体 的 操作 步骤 如 下 : 


D 接 上 一 节 的 操作 ， 选 择 菜单 


操作 如 图 3-58 所 示 。 


现在 要 做 的 就 是 把 它 导 出 ， 变 成 真正 的 网 页 。 


栏 中 的 “文件 ”一 “存储 为 Web 所 用 格式 ”命令 ， 具 体 


存储 为 Wob 所 用 楼 式 (10@%) 


图 3-58 执行 “ 存 


20 打开 “存储 为 Web 所 用 格式 ”对 记 
散 ” 模 式 ,“ 仿 色 ” 值 为 100%, “WEB 靠 色 ” 值 为 100%， 


EJ Web 所 用 格式 ”命令 
E 框 ， 设 置 为 “GIF” 格 式 ,“ 颜 色 ” 值 为 236,“ 扩 


其 他 设置 如 图 3-59 所 示 。 


图 3-59 
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“存储 为 Web 所 


格式 ”对 话 框 


Eos mowxwekms 
nex 


6 JER 百分比 : [10 . 


» ex-* am [mc * 


3) 单 击 “ 存 储 ” 按 钮 打开“ 将 优化 结果 存储 为 ”对 话 框 ， 在 电脑 的 D 盘 下 建立 文件 


m. 
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H 


shop, FEE RFE” A ASAA, ARE shop 文件 夹 ， 其 他 保 


持 默 认 值 ， 具 体 设置 如 图 3-60 所 示 。 


将 优化 结果 存储 为 


REO): [O :hep 


a o2 pa- 


我 最 近 的 文档 


4) 单 击 “ 保 存 ” 按 钮 ， 完 成 保存 切片 的 操作 。 


图 3-60 “将 优化 结果 存储 为 ”对 话 框 设置 


打开 保存 文件 的 路 径 ， 我 们 可 以 看 到 系统 


已 经 自动 生成 了 一 个 名 为 images 的 文件 夹 ， 文 件 夹 里 是 前 面 切片 后 产生 的 小 图 片 ， 由 这 些小 


图 片 组 成 了 首页 的 效果 ， 在 设计 的 时 候 可 以 分 别 调 月 


这 些小 图 片 ， 具 体操 作 如 


d novam 
] Elin 


为 了 后 面 编排 网 页 的 需要 ， 可 以 将 这 些小 图 
名 ， 以 方便 网 页 排版 设计 之 用 。 


图 3-61 切割 的 小 图 片 


图 3-61 所 示 。 


EE 


HR ds A DEMM KA XC 
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第 4 章 专业 的 网 页 排版 布局 


网 站 在 建设 的 过 程 中 ， 经 常会 遇 到 “选择 什么 样 的 网 页 布局 方式 ”这 种 问题 。 通 常 


网 页 的 布局 可 以 使 用 表格 和 DIV GR) 两 种 布局 ， 对 一 般 的 应 
易 懂 的 表格 布局 即 可 。 正 如 建造 房子 一 样 ， 网 页 的 布局 相当 于 搭建 房子 的 结构 框架 。 网 
站 页 面 的 编排 并 不 像 想 象 中 的 那么 难 ， 如 果 读 者 熟练 掌握 在 Word H 
法 ， 那 么 学 习 本 章 将 是 十 分 轻松 的 。 网 页 的 排版 就 像 房子 的 搭建 ， 首 先 要 月 


型 企业 而 言 ， 使 用 简 


l 


3] 


进行 表格 制作 的 方 
表格 搭 好 杠 


架 ， 然 后 再 用 图 片 和 文字 使 整个 网 页 充实 起 来 。 在 这 个 操作 中 需要 掌握 Dreamweaver 
CS6 软件 的 表格 、 图 片 、 链 接 、CSS 样式 等 知识 ， 掌 握 了 这 些 对 象 的 应 用 方法 之 后 就 可 


以 排出 精美 的 网 站 页 面 。 
本 章 重 点 介绍 如 下 知识 : 


(—7 网 页 布局 的 基础 
(— 网 站 首页 的 布局 
O 网 页 的 样式 美化 


4.1 网 页 布局 基础 


411 表格 基础 知识 


Dreamweaver CS6 中 的 表格 ， 是 页 面 布局 中 极为 常 


网 页 布局 搭建 是 一 项 十 分 精细 的 了 
背景 图 
网 页 结构 进行 编排 ， 插 入 相应 的 


[ 作 ， 搭 建 的 时 候 ， 我 们 需要 在 站 点 中 把 相应 的 
片 先 准备 好 ， 然 后 利用 Dreamweaver CS6 的 图 层 和 表格 对 象 ， 按 第 3 章 设计 的 
图 片 、 文 字 以 及 表单 对 象 ， 从 而 完成 整个 静态 页 面 的 


] 的 设计 工具 。 在 设计 页 面 时 ， 往 往 


要 利用 表格 来 定位 页 面 元 素 。 使 用 表格 可 以 实现 导入 表格 数据 、 设 计 页 面 分 栏 、 定 位 页 面 上 


的 文本 和 图 像 等 操作 。 表 格 基本 上 是 随 着 用 户 添加 正文 或 图 像 而 扩展 的 。 表 格 由 三 个 主要 元 


素 构成 : 行 、 列 和 单元 格 〈 图 4-1 
和 列 的 交界 部 分 ， 它 是 用 户 输入 信 ， 


)。 行 是 从 左 到 右 的 走 同 ， 列 则 是 上 下 到 
HHY, Æ Dreamweaver CS6 中 ， 单 元 格 会 自动 扩展 


到 与 输入 的 信息 相 适应 的 大 小 。 如 果 用 户 已 启动 了 表格 边框 ， 导 


框 和 其 中 包含 的 所 有 单元 格 。 


8 么 在 浏览 器 


E 向 ; 单元 格 是 行 


示 表 格 边 
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图 4-1 在 Dreamweaver CS6 中 的 表格 


通常 在 Dreamweaver CS6“ 文 档 ” 窗 口中 ， 可 以 通过 单 击 回 而 按钮 ， 打 开 HTML 代码 
进行 相应 的 管理 ， Rus AD i del 这 里 ， 用 <table> 和 </table> 
标记 分 别 定 义 一 个 表格 的 开始 和 结束 (图 4-2)。 表 格 的 标题 和 内 容 包含 在 这 两 个 标记 之 
间 。 Re MUUA 表格 高 度 则 由 <td> 和 </td> 标 记 表 示 。 


<table width*"766" border-"0" cellspacing*"O" cellpaddinge"0"» 

«tr» 
«tdsKnbsp;s/td» 
*«td»&nbsp;«/td» 
*td»&nhsp ;< 
*std»&nbsp; - 
*«td»&nbsp:; - 

</tr> 

<tr> 
stdoKnbsp;c/cd- 
std»fmbsp ; « 
*td»&nbsp: ;< > 
<EdEnhbsy ;< 
*td»&nhbsp:; « 

</tr> 

<tr> 
<td>snbsp:< 
*td»&nbsp : <. > 
<tdsnbsp:=< 
*td»&nhsp:; «-/cd» 
<td>ánbsp;:</td> 

</tr> 


ee 
请 为 该 文才 创建 一 个 让 点 。 
ies—texmmn. 


图 4-2 ”表格 中 的 代码 


<table> 是 带 有 很 多 属性 的 ， 现 在 将 一 些 最 为 常用 的 属性 介绍 如 下 : 
Align: 该 属性 用 于 决定 表格 在 文档 中 的 对 齐 方式 ， 其 可 选 的 属性 值 为 left〈 左 对 齐 )、 
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center《〈 居 中 对 齐 ) M right 〈 右 对 齐 ) 等 

Width: 该 属性 用 于 确定 表格 在 浏览 的 宽度 ， 其 取 值 可 以 是 像素 值 ， 以 设置 表格 的 
BU QU I RU E ERO E 
设置 该 属性 ， 则 表格 的 宽度 由 用 户 的 浏览 器 根据 表格 中 各 项 设置 自行 确定 。 

Height: 该 属性 用 于 确定 表格 在 浏览 器 中 的 高 度 ， 其 取 值 可 以 是 像素 值 ， 以 设置 表格 的 
绝对 高 度 ， 也 可 以 是 相对 于 浏览 器 窗口 高 度 的 百分比 值 ， 用 于 设置 表格 的 相对 高 度 。 如 果 不 
设置 该 属性 ， 则 表格 的 高 度 由 用 户 的 浏览 器 根据 表格 中 各 项 设置 自行 确定 。 

Dir: 该 属性 描述 表格 的 方向 ， 其 取 值 是 一 个 用 于 说 明 方 向 的 字符 串 。 默 认 状 态 下 ， 表 
格 的 方向 是 从 左 至 右 的 ， 这 时 表格 的 顶端 是 第 0 行 ， 左 端 是 第 0 列 ; 如 果 将 dir 属性 值 指定 
为 RIL， 则 将 表格 的 方向 设置 为 从 右 至 左 ， 这 时 表格 的 顶端 同样 是 第 0 行 ， 但 是 右 端 才 是 
第 0 列 。 设 置 了 表格 的 方向 之 后 ， 会 影响 表格 中 所 有 单元 格 中 文本 的 方向 ， 因 此 可 以 针对 特 
定 的 单元 格 ， 设 置 其 方向 属性 ， 以 避免 这 种 情况 的 发 生 。 


41.2. 表格 的 基础 操作 


在 介绍 了 表格 的 基本 概念 以 及 表格 的 属性 之 后 ， 下 面 将 学 习 如 何在 Dreamweaver CS6 
“文档 ”窗口 中 进行 表格 的 编辑 。 


1. 在 网 页 中 插入 表格 


1) 任 选 以 下 操作 之 一 创建 表格 : 

e 将 鼠标 移 到 “文档 ”页 面 上 相应 位 置 ， 打开 “插入 ”面板 ， 然 后 单 击 “ 表 格 ” 按 馈 国 。 
e XGEGUCRES LER "IRA" “表格 ” 合 命令 。 

e 将 “插入 表格 ”按钮 国 ， 从 “插入 ”面板 拖 动 到 页 面相 应 位 置 。 

通过 以 上 任 一 方式 执行 创建 表格 命令 后 ， 打 开 图 4-3 所 示 的 “表格 ”对 话 框 ， 在 这 上 
根据 需要 进行 表格 的 参数 设置 。 


pd 


图 4-3 “表格 ”对 话机 
20 在 “ 行 数 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 行 数 。 


IHI 
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3) Æ " Jj" AHE! 


>» D 


4) 在 
格 宽度 。 


变数 值 ， 就 可 以 改变 这 个 百 
想 以 一 个 绝对 像素 数值 
输入 像素 数值 ， 


素 ” 选 项 。 


DO WE 
这 里 输入 0。 
6) 在 “单元 格 边 距 
7) 在 “单元 格 间距 
8) 在 “标题 ” 
“顶部 ”“ 两 者 ” 几 个 选 
9) 在 “标题 ”文本 框 中 
100 在 “ 摘 


JFH 


列 


边框 粗细 ”文本 本 


选项 中 ， 
项 。 


要 ”文本 框 中 ， 


葵 入 需要 所 


fi 入 表格 的 列 数 。 
ns a ee 
默认 的 表格 大 小 设置 为 占据 浏览 器 
E 
作为 表格 宽度 ， 而 不 是 相对 百分比 ， 则 可 以 在 


rH 


n 


?” AHE! 
?” AHE! 


2. RMRI RE 


表格 


RKE, jE 
受到 所 在 表格 单元 格 的 大 4 
件 。 用 户 可 以 将 表格 放 在 


个 新 表格 提 
\ 的 限制 。 


XE TTA CES BI BE F: 
D 选择 下 列 操作 之 一 创建 嵌 套 表 : 


e 将 鼠标 移入 某 个 让 
e 将 鼠标 移 到 页 本 
板 中 的 “表格 ”按钮 国 。 
e 将 “表格 ”按钮 图 ， 从 “插入 ”面板 拖 

动 到 页 面 所 需 位置 。 


PE 四 


单 击 “ 表 格 宽度 ”文本 框 右 


， 输 入 表格 的 边框 宽度 。 


侧 


的 三 角 按 钮 图 ， 
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览 器 窗口 百分比 为 单位 的 表 


的 75%， 通 过 在 “表格 宽度 ”文本 框 中 改 


表格 会 保持 这 个 比例 )。 如 果 
“表格 宽度 ”文本 框 中 
开 下 拉 菜 单 ， 选 择 “ 像 


1] 


如 果 不 希望 显示 边框 ， 贝 


OR 


OA 


元 格 之 


P 可 以 输入 标题 的 说 明文 字 ， 用 于 
输入 表格 的 摘要 。 
11) 设置 完成 之 后 ， 单 击 “ 确 定 ” 按 钮 ， 从 而 完成 表格 的 创建 。 


元 格 中 的 内 容 与 单 
间 的 距离 。 
可 以 选择 表格 的 说 明 在 表格 中 的 位 置 ， 主 要 有 “无 ”“ 左 ” 


元 格 边 界 之 间 的 距离 。 


说 明 标 题 。 


入 到 已 有 的 表格 单元 格 中 。 当 然 ， 艇 入 的 表格 宽度 将 
Dreamweaver CS6 (Ecce ERA fee EIS BR IA 


任意 单元 格 中 。 


元 表格 ， 然 后 选择 菜单 栏 上 的 “ 揪 


上 相应 位 置 


2) 在 打 


的 插入 “表格 ”对 话机 


， 单 击 


EE 中 设置 表 


“ 插 


PRA 3， 在 “ 列 ” 


格 属性 ， 在 “ 行 数 ”文本 框 
文本 框 中 输入 3; 在 “表格 宽度 ”文本 框 中 
100， 并 且 单 击 三 角 按 钮 圈 打 开 下 拉 菜 站 


所 示 


“百分比 ”单位 ; 
1， 其 他 的 参数 保持 默认 值 。 


D 设置 完成 后 ， 单 击 “ 思 


在 “ 边 


幅 套 表格 的 效果 如 图 


角 定 ”按钮 退出 。 
4-5 所 示 。 


TE 选择 
匡 粗 细 ”文本 框 中 输入 
具体 设置 如 图 4-4 


d 


JA 


:表格 的 属性 


4-4 设 
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Kl4-5 WERT 


3. 在 表格 中 输入 文字 或 者 插入 图 片 


在 表格 单元 格 中 可 以 搬入 文本 、 图 片 等 其 他 内 容 。 


在 表格 中 插入 文字 的 操作 步骤 如 下 : 


将 鼠标 移 到 一 个 表格 单元 格 中 ， 然 后 任 选 以 下 操作 之 一 插入 文字 。 
e 直接 输入 文本 。 当 输入 的 文本 长 度 超过 表格 单元 格 宽度 时 ， 表 格 单元 格 会 自动 调整 


其 宽度 。 


€ 将 Dreamweaver CS6 或 其 他 文本 编辑 器 中 的 文本 ， 复 制 并 粘贴 到 表格 单元 格 中 。 


在 表格 中 插入 图 像 的 操作 步 又 如 下 ; 
1) 将 鼠标 移 到 需要 插入 图 像 的 单元 格 中 。 


D 在 “插入 ”面板 中 单 击 “图 像 ” 按 钮 图 ， 或 选择 菜单 栏 上 的 “插入 ”一 “图 


像 ” 命 命令 。 


3) 在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 选中 要 可 


完成 图 片 的 插入 操作 ， 如 图 4-6 所 示 。 


选择 图 你 源 文件 


站 点 根 目录 
选择 文件 名 自 : @ 文件 系统 (SARER | 
ox 站 点 和 服务 器 


nevs. gif 
去 
newsbottom.gif |B to 


c— 808 


rr Ümrrmm 


VRL: /inages/01. jpg 
i 站 点 根 目 寻 


图 4-6 插入 图 片 操作 
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入 的 图 片 ， 单 击 “ 确 定 ” 按 钮 即 可 


214 x 128 JPEG, 40K / 
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4. HERT 


在 创建 表格 和 输入 表格 内 容 之 后 ， 有 时 需要 修改 表格 中 的 数据 ， 这 就 要 对 表格 元 素 进 
行 选择 ， 以 便 做 下 一 步 的 操作 。 选 择 表格 元 素 时 ， 可 以 选择 整个 表格 ， 也 可 以 选择 一 行 、 一 
列 或 多 行 、 多 列 ， 还 可 以 选择 表格 中 连续 或 不 连续 的 多 个 单元 格 。 选 定 表 格 或 单元 格 之 后 ， 
可 以 修改 选 定单 元 格 及 其 所 包含 的 文本 ， 也 可 以 复制 和 粘贴 连续 的 单元 格 〈 值 得 注意 的 是 ; 
在 Dreamweaver CS6 中 ， 不 能 复制 或 粘贴 非 连续 的 单元 格 )。 


41.3 表格 的 属性 面板 


要 设置 整个 表格 的 属性 ， 首 先 必须 选 定 整 个 表格 ,然后 利用 “属性 ” i 
的 属性 。 选 择 菜单 栏 上 的 “修改 ”一 “表格 ”一 “选择 表格 ”命令 ， 或 者 使 用 前 面 介绍 的 其 
他 方法 选择 表格 。 选 定 表 格 后 ， 如 果 “ 属 性 ”面板 是 打开 的 ， 它 会 显示 图 4-7 中 所 示 的 表格 
属性 ， 如果“ 属性 ”面板 未 打开 ， 则 用 户 可 以 通过 选择 淋 单 栏 上 的 “窗口 ”一 “属性 ” 命 
S, 打开 “属性 ”面板 来 查看 表格 属性 。 


rr, 表格 awp | Æw h0 aani |(arwgu m| olz " 
| — al roid ; 间距 6) mE) : 


TER — —]eo 


Ta 


图 4-7 表格 “属性 ”面板 


设置 表格 整体 属性 

1) 在 “属性 ”面板 左边 的 “表格 ”文本 框 中 ， 可 以 设置 表格 的 名 称 。 

2) 在 “ 行 ” 和 “ 列 ” 文 本 框 中 ， 输 入 表格 的 行 数 和 列 数 。 

3) 在 “ 宽 ” 文 本 框 中 ， 输 入 表示 表格 宽度 的 数值 ， 并 以 “像素 ”或 浏览 器 窗口 的 百 分 
比 “%” 为 单位 。 

注意 : 

表格 的 高 度 一 般 不 需要 指定 。 

4) 使 用 “对 齐 ” 下 拉 列 表 ， 可 以 设置 该 表格 与 同一 段落 中 的 其 他 元 素 〈 如 文本 或 图 
像 ) 的 对 齐 方式 。 单 击 右边 的 三 角 按钮 国 ， 弹 出 “对 齐 ” 下 拉 菜 单 ， 下 面 简单 的 说 明 一 下 下 
拉 菜 单 中 的 各 项 功能 : 

“ 左 对 齐 ” 选 项 ， 使 表格 与 其 他 元 素 左 对 齐 ; 

“ 右 对 齐 ” 选 项 ， 使 表格 与 其 他 元 素 右 对 齐 ; 
居中 对 齐 ” 选 项 ， 使 表格 相对 于 其 他 元 素 居中 对 齐 ; 
当然 ， 在 这 里 也 可 以 选择 浏览 器 的 默认 对 齐 方式 “默认 ”选项 。 


2. 设置 单元 格格 式 
1) 在 单元 格 “ 填 充 ” 文 本 框 中 ， 指 定单 元 格 内 容 与 单元 格 边 线 之 间 的 像素 值 。 
2) 在 单元 格 “间距 ”文本 框 中 ， 指 定 每 个 表格 单元 之 间 的 像素 值 。 


[24 
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设置 表格 的 边框 


1) 在 “边框 ”文本 框 中 ， 可 以 设置 表格 的 边框 宽度 值 ， 单 位 为 像素 。 如 果 将 边框 宽度 
设置 为 0， 则 不 显示 边框 。 为 了 方便 用 户 的 操作 ， 在 默认 状态 下 ， 在 “文档 ”窗口 中 将 显示 
表格 的 虚拟 边框 。 

2) 在 “边框 ”文本 框 中 也 可 以 设置 是 否 显示 表格 的 虚拟 边框 ， 方 法 是 选择 菜单 栏 上 的 
“查看 ”一 “可 视 化 助理 ”命令 ， 在 打开 的 子 全 单 中 取消 对 “表格 边框 ”命令 的 选择 。 


4. 取消 显示 表格 的 宽度 


在 Dreamweaver CS6 中 ， 当 选中 一 个 激活 的 表格 时 ， 默 认 情况 下 ， 在 “文档 ”窗口 中 
会 显示 表格 的 宽度 图 4-8)。 可 以 选择 “查看 ”一 “可 视 化 助理 ”命令 ， 在 打开 的 子 菜单 
中 取消 对 “表格 宽度 ”命令 的 选择 ， 即 可 取消 显示 表格 的 宽度 。 


E MM -一 ~ 
500 = 


图 4-8 ”显示 表格 的 宽度 


.设置 表格 的 背景 
1) 在 “背景 图 像 ” 文 本 框 中 ， 可 以 设置 表格 的 背景 图 像 的 链接 地 址 ， 或 单 击 该 文本 框 
右 侧 的 “浏览 文件 ”按钮 国 ， 从 打开 的 “选择 文件 ”对 话 框 中 选择 一 个 图 像 文 件 ， 如 图 4-9 
所 示 。 
选择 文件 名 目 : @ 文 件 系统 
Oszt 
查找 范围 QD); 
TUTTI E 
文件 类 到 加) | 所 有 文件 (60 
图 4-9 设置 表格 的 背景 图 像 
20 在 “背景 颜色 ”文本 框 中 可 以 设置 表格 的 背景 颜色 ， 或 单 击 该 文本 框 左 侧 的 “颜色 


选择 ” 框 站 ， 从 打开 
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的 颜色 选择 器 中 选择 一 种 颜色 ， 具 体操 作 如 图 4-10 所 示 。 
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#D6D6D6 


图 4-10 选择 背景 颜色 的 色 值 


414 网 页 的 布局 设计 


决定 网 页 是 否 精彩 的 因素 有 很 多 ， 比 如 色彩 的 搭配 、 文 字 的 变化 、 图 片 的 处 理 等 ， 除 
了 这 些 不 可 忽略 的 因素 之 外 ， 还 有 一 个 非常 重要 的 因素 一 一 网 页 的 结构 设计 (也 称 网 页 布 
局 )。 网 页 的 布局 可 以 使 用 Dreamweaver 的 表格 和 框架 来 搭建 完成 。 这 里 介绍 一 下 网 页 的 布 
局 类 型 ， 网 页 布局 大 致 可 分 为 国字 型 、 拐 角 型 、 标 题 正文 型 、 左 右 框 架 型 、 上 下 框架 型 、 综 
合 框架 型 、 封 面 型 和 Flash 型。 

1) 国字 型 ， 是 一 些 大 型 网 站 所 喜欢 的 类 型 ， 即 最 上 面 是 网 站 的 标题 以 及 横幅 广告 条 ， 
接 下 来 是 网 站 的 主要 内 容 ， 左 右 分 列 一 些小 条 内 容 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗列 到 
底 ， 最 下 面 是 网 站 的 一 些 基本 信息 、 联 系 方式 、 版 权 声明 等 。 这 种 结构 是 在 网 上 见 到 的 差 不 
多 最 多 的 一 种 结构 类 型 ， 如 图 4-11 Bp. 
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AR SERE T 


2) HAW: 这 种 结构 上 面 是 标题 及 广告 横幅 ， 接 下 来 的 左 侧 是 一 罕 列 链接 等 ， 右 列 是 
E 文 ， 下 面 也 是 一 些 网 站 的 辅助 信息 。 在 这 种 类 型 中 ， 一 种 很 常见 的 类 型 是 最 上 面 是 


标题 及 广告 ， 左 侧 是 导航 链接 ， 如 图 4-12 所 示 。 


LANCOME 


mieey le 


图 4-12 拐角 型 布局 网 站 


3) 标题 正文 型 : 这 种 类 型 最 上 面 是 标题 或 标志 ， 下 面 是 正文 ， 比 如 一 些 文章 页 面 或 注 
册页 面 等 就 是 这 种 类 型 ， 如 图 4-13 所 示 。 
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afi ER | 注册 | PEER | 使 用 帮助 | 新浪 首页 


日 选择 登录 名 VERE. 1. 选择 登录 名 - 2. 注册 成 功 
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Saa BHXus 
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图 4-13 标题 正文 型 网 页 布局 
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4) 左右 框架 型 : 这 是 一 种 框架 结构 ， 一 般 左 面 是 导航 链接 ， 有 时 最 上 面 会 有 一 个 小 的 
标题 或 标志 ， 右 面 是 正文 。 见 到 的 大 部 分 的 大 型 论坛 都 是 这 种 结构 的 ， 有 一 些 企业 网 站 也 喜 


欢 采 用 。 这 种 类 型 结构 非常 清晰 ， 一 目 了 然 ， 如 图 


5) 上 下 框架 型 : 


6) 综合 框架 型 ， 上 页 两 种 结构 的 结合 ， 相 对 复杂 的 一 利 


4-14 所 示 。 
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图 4-14 左右 框架 网 页 布局 


与 上 面 类 似 ， 区 别 仅仅 在 于 是 一 种 上 下 分 为 两 页 的 框架 。 
框架 结构 ， 较 为 常见 的 是 类 似 


于 “拐角 型 ”结构 的 ， 上 只 是 采用 了 框架 结构 ， 如 图 4-15 所 示 。 
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图 4-15 综合 框架 网 页 布局 
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7) 封面 型 这 种 类 型 基本 上 是 出 现在 一 些 网 站 的 首页 ， 大 部 分 为 一 些 精 美的 平面 设计 


片上 做 链接 而 没有 任何 提示 ， 如 图 4-16 所 示 。 


OFFICE FURNITIURE 


aJo 


有 : ibE exo ARRA 


ER 
Design By BIA AR, Copyright82005-2007 Adtian Corporation, All Rights Reserved 
京 ICF 证 正在 申请 中 


图 4-16 ”封面 型 网 页 布局 


8) Flash 型 : 其 实 这 与 封面 型 结构 是 类 似 的 ， 只 是 这 利 


结合 一 些小 的 动画 ， 放 上 几 个 简单 的 链接 或 者 仅 是 一 个 “进入 ”的 链接 甚至 直接 在 首页 的 图 


类 型 采 月 


昌 了 目前 非常 流行 的 


Flash， 与 封面 型 不 同 的 是 ， 由 于 Flash 强大 的 功能 ， 页 面 所 表达 的 信息 更 丰富 ， 如 图 4-17 


所 示 。 


图 4-17 Flash 型 网 页 布局 


4.2 网 站 首页 的 布局 


本 节 介 绍 本 实例 中 网 站 首页 在 Dreamweaver CS6 中 的 编排 方法 。 操 作 过 程 中 ， 将 涉及 
Dreamweaver CS6 软件 的 站 点 建立 、 表 格 插入 、 表 单 插入 、 图 片 插入 以 及 文字 插入 等 基础 的 
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网 页 编排 操作 。 
4.2.1 搭建 本 地 站 点 


首先 在 Dreamweaver CS6 中 创建 一 个 本 地 站 点 shop， 以 方便 网 站 页 面 的 设计 。 和 定义 站 
点 以 及 设置 站 点 的 方法 有 两 种 ; 二 定义 站 点 向 导 来 定义 站 点 ， 男 一 种 是 直接 定义 站 
点 。 下 面 就 定义 站 点 向 导 的 方法 进行 介 
用 定义 站 点 问 导 定义 站 o E 

1) 在 本 地 计算 机 C 盘 路 径 下 C:\Apache\htdocs\ 建 立 shop 站 点 文件 夹 ( 即 Apache 服务 
器 的 htdocs 文件 夹 )， 在 文件 夹 内 建立 images 子 文件 夹 。 局 动 Dreamweaver CS6， 打 开 
Dreamweaver CS6 的 工作 界面 ， 如 图 4-18 所 示 。 
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图 4-18 Dreamweaver CS6 II] dE J H 


2) 执行 菜单 栏 上 的 “站 点 ”一 “管理 站 点 ”命令 ， 打 开 的 “管理 站 点 ”对 话 框 如 图 4-19 
所 示 。 在 该 对 话 框 的 上 边 是 站 点 列表 框 ， 将 显示 所 有 已 经 定义 的 站 点 。 


m 
hc 


图 4-19 打开 的 “管理 站 点 ”对 话 框 
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3) 单 击 “ 新 建站 点 ”按钮 ， 即 打开 “站 点 设置 对 象 未 命名 站 点 1” 对 话 框 ， 如 图 4-20 
所 示 。 


Leer 未 命 名 站 点 d 1 


preasan ERA NUR E ERE Preig 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 web 上 的 服务 器 上 的 远程 文件 来 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选 摊 本 地 文件 夹 和 名 称 。 
站 点 名 称 ; 
ZE HESS SERES [c'ipocuments and SettingstAdministrator\My Documents\ t) fgg 


图 4-20 打开 “站 点 设置 对 象 ”对 话 杠 


4) 在 “站 点 名 称 ” 文 本 框 中 输入 将 要 建立 的 站 点 名 称 ， 这 里 输入 “shop” 作 为 站 点 的 
名 称 。 在 “本 地 站 点 文件 来” 文本 框 中 输入 “C:\Apache\htdocs\shop\”， 输 入 的 这 个 地 址 是 
本 地 计算 机 的 站 点 的 地 址 ， 输 入 后 如 图 4-21 所 示 。 


站 点 设置 对 象 shop 


mweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 
VAATSANLMO SH REEMA SEEEN LEUR 
， 以 及 可 在 其 中 将 相同 文件 发 布 到 web 上 的 服务 器 上 的 远程 文件 赤 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 ; | shop 


本 地 站 点 文件 买 ; [C:VApache\htdocs\shop\ |S 


图 4-21 输入 站 点 名 称 和 地 址 


5) 输入 站 点 名 称 和 地 址 后 ， 单 击 “ 服 务 器 ” 列 选 项 ， 进 行 站 点 的 服务 器 设置 (图 4-22). 
通过 该 对 话 框 ， 用 户 可 以 选择 一 种 服务 器 技术 。 通 过 选择 服务 器 技术 可 以 实现 动态 网 站 的 建 
设 ， 在 Dreamweaver CS6 中 包含 的 服务 器 技术 有 ASP JavaScript、ASP VBScrip、ASPNET、 
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JSP 及 PHP MySQL 等 。 


站 点 设置 对 象 shop 


6) 单 击 对 话 框 上 的 “添加 新 服务 器 ”按钮 E， 打 开 “ 


您 将 在 此 位 置 选 择 承 载 此 对 话 框 的 设置 来 自 


Internet 服务 提供 商 (SP) 或 web 管理 员 


第 4 章 专业 的 网 页 排版 布局 | 


注意 ; 要 开始 在 Dreamweaver 站 点 上 工作 ， 您 无 需 完成 此 步骤 。 如 果 要 连接 到 web 并 发 
远程 服务 器 即 可 。 


布 页 面 ， 您 只 需 定义 一 个 


| 连接 | 远程 “| 测试 | 


图 4-22 “站 点 设置 对 象 shop” 对 话 框 


基本 i 选项 卡 , 


并 在 里 面 对 服 务 


器 进行 设置 ， 在 “服务 器 名 称 ” 文 本 框 中 输入 shop， 在 “连接 方法 ”的 下 拉 列 表 项 中 选择 
“本 地 /网 络 ” 将 “服务 器 文件 来 ”的 路 径 设置 为 C:\Apache\htdocs\shop， 将 “Web URL W 


站 地 址 )” 设 置 为 http:/127.0.0.1/， 设 置 完成 后 如 图 


站 点 设置 对 得 shop 


服务 器 名 称 : [shop 


e ES V — v] 


服务 器 交 件 夹 : [ C: VApachelhtdocsishop e 


Web URL: | http://127.0.0.1/ 


) 设置 好 服务 器 技术 后 ， 


框 ， 如 图 4-24 所 示 。 


图 4-23 ”设置 服务 器 属性 
单 击 “保存 ”按钮 ， 则 


RITH 


4-23 所 示 。 


[一 个 选择 文件 


储存 位 置 的 对 话 
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EE zem 


您 将 在 此 位 置 选择 承载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
Internet 服务 提供 商 (ISP) 或 web TRA. 


Dreamweaver 站 点 上 工作 ， 悠 无 需 充 成 此 步 驰 。 加 果 要 连接 到 Web 并 发 
一 个 远程 服务 器 即 可 。 


说 明 : 


图 4-24 选择 存储 文件 的 位 置 


如 果 用 户 选择 了 远程 和 测试 ， 并 且 在 计算 机 上 安装 了 Apache， 则 可 以 在 本 地 计算 机 上 


编辑 和 测试 文件 。 


(8) 最 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 站 点 的 设置 。 


到 这 里 就 完成 了 本 地 站 点 服务 器 的 规划 设计 ， 这 一 个 关键 的 设置 可 以 方便 后 面 的 章节 


进行 设计 并 应 用 。 
422 图 片 素材 的 准备 
前 面 在 第 3 章 中 将 首页 的 设计 图 


片 进 行 了 切片 ， 并 将 改名 的 图 


片 放 置 到 images 文件 夹 


下 面 ， 这 里 读者 可 以 从 源 文 件 shop/images 文件 夹 中 ， 复 制 所 有 的 图 片 至 自己 本 地 计算 机 中 
的 shop/images 文件 夹 中 ， 效 果 如 图 4-25 所 示 。 


Bc ose 
e 图 片 任务 
T 作为 XNJ 片 查看 
Q mamma 
dy noms 


xHEHXOGA 。 


图 4-25 
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夹 并 复制 文件 
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42.9 设计 导航 top.php 


本 实例 中 导航 部 分 的 搭建 相对 比较 简单 ， 导 航 就 是 网 站 页 面 的 上 半 部 分 ， 通 常 位 于 网 
页 的 上 端 。 单 独 建立 了 一 个 top.php 文件 ， 主 要 包括 表格 的 插入 和 图 片 的 租 入 设置 ， 具 体 的 
制作 步骤 如 下 ; 

1) 运行 Dreamweaver CS6， 选 择 建立 的 shop 站 点 ， 进 入 网 站 站 点 的 编辑 页 面 ， 如 
4-26 所 示 。 


[Dw m» o à- wm. -lol xj 
文件 (7) Sao 查看 (VY) MAD ga RO) (0 基点 (CS) WD W00 


打开 最 近 的 项 目 主要 功能 
T shophopdvphp EF CS6 EDENE 


T whopnop pep z 
pee manes 
T ehopigonegsclst php Business Catalyst 创作 


"E osopiesqpe pbp = 
E ostopladexsep CEES 


E utomewpplp Kony Mabay B 


T shopen mesa php 
T osbopisdextest php Piep MK 
evs 


图 4-26 打开 网 站 站 点 
2) 执行 菜单 “文件 ”一 “新 建 ” 命 令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 在 “空白 页 ”选项 


卡 中 ， 选 择 “ 页 面 类 型 ”选项 组 中 的 “PHP” 选 项 ， 在 “布局 ”中 选择 “无 ”选项 ， 具 体 设 
置 如 图 4-27 所 示 。 


本 sa 
Th asmens 
ASPON 
RD Faron 
因 xa 


3 
BENE - 
ms: 2 MEX. ame. penp SOPS [nm 10 nescia 国 
mis: 3 MAE, ELUME mA css (I [miis 
Rm css 文件 


图 4-27 “新 建文 档 ” 对 话机 


IHI 


115 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


3) 设置 完成 后 ， 单 击 “ 创 建 ” 按 钮 ， 即 在 Dreamweaver CS6 中 创建 了 一 个 PHP 页 面 。 


首先 将 文档 保存 为 top.php， 然 后 在 “标题 ”文本 框 中 输入 “ 翡 萌 电子 商城 ” 设置 如 图 
4-28 所 示 。 
DW xo) do) soo MAD Jw REO) $0 VAO woe Wo NE O% à aiu. lelox 
T^ E $e. umi. c RE i 
v»: Eu | 
ER n 
图 4-28 设置 “标题 ”名 称 
操作 说 明 : 
“标题 ”文本 框 中 输入 的 “ 翡 雄 电子 商城 ?， 将 在 对 文件 测试 时 显示 在 网 页 的 标题 栏 


中 。 


4) 执行 菜单 “插入 ”一 “表格 ”命令 ， 打 开 “ 表 格 ” 对 话 框 ， 在 “ 行 数 ”文本 框 中 ， 


输入 需要 插入 表格 的 行 数 为 2;， 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 列 数 为 


2; 在 «x 


格 宽度 ”文本 框 中 输入 766 并 选择 “像素 ”; “边框 粗细 ”“ 单 元 格 边 距 ” 和 “单元 格 间 距 ” 


都 为 0;， 其 他 设置 保持 默认 值 。 其 体 设置 如 图 4-29 所 示 。 


H 


图 4-29 “表格 ”设置 对 话 框 
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5) 单 击 “ 确 定 ” 按 钮 ， 完 成 此 设置 。 这 时 在 首页 的 顶部 ， 就 建立 了 一 个 2 行 2 列 的 表 
格 ， 在 “属性 ”面板 中 ， 设 置 对 齐 方式 为 “居中 对 齐 ”， 有 具体 设置 如 图 4-30 所 示 。 


图 4-30 设置 表格 属性 

6) 拖 动 鼠标 选择 第 一 行 的 表格 ， 再 单 击 “ 属 性 ”面板 上 的 “合并 单元 格 ” 按 钮 名， 将 
第 一 行 合并 成 一 整个 表格 ， 选 择 表格 的 第 1 个 单元 格 ， 单 击 “ 拆 分 ”按钮 ， 在 <td> 后 面 租 入 
背景 图 片 即 加 入 代码 background-"images/bannertop.gif", WK] 4-31 所 示 。 


图 4-31 插入 Logo 背景 的 效果 


7) 单 击 “ 设 计 ” 按 钮 ， 返 回 文档 窗口 ， 单 击 选择 第 2 行 第 1 个 单元 格 ， 选 择 菜单 栏 上 
的 “插入 ”一 “图 像 ” 命 令 。 在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 中 要 插入 的 图 片 
bannerleft.gif， 单 击 “ 确 定 ” 按 钮 就 可 以 完成 图 片 的 插入 操作 ， 如 图 4-32 所 示 。 


选择 图 像 源 文件 


a CE oem 


imagez/bannerleft. gi f 


prm? 


图 4-32 ”插入 第 一 张 图 片 
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8) 单 击 选择 第 2 行 第 2 个 单元 格 ， 执 行 菜单 栏 上 的 “插入 ”一 “图 像 ” 命 令 。 在 打开 


的 “选择 图 像 源 文件 ”对 话 框 中 选中 要 插入 的 图 片 bannerright.gif， 单 击 “ 确 定 ” 按 钮 就 可 
以 完成 图 片 的 插入 操作 ， 如 图 4-33 所 示 。 


9) 单 击 “确定 ”按钮 ， 择 入 图 片 。 整 体 效果 如 图 


选择 图 像 源 文件 


选择 文件 各自: 
Saa 站 点 和 服务 器 


bannerright. gif conpany. gif 
bannertop. gif index bg. gif 
biao gif indexnew 04. gif 
botton. gif linel. gif 
: eif iine cit 
cart. psd 国 lines eit 


Ec jpe Bine gif 


bannerdi. gif carttop.psd news. gif 
newsbotton. gi f topbgd. 


bannerleft. gif circle. gif 


dd a Bel > 


mham. ER | 
文件 类 型 [) [ER (r gif;* jpe:*. jpeg:*. png:* ~x) 


m 
ir tas 
在 站 点 定义 中 更 改 默 认 的 访 接 相对 于 


547 x 144 GIF, I3K / 1 


图 4-33 插入 第 2 张 图 片 
4-34 所 示 。 当 然 ， 用 户 在 实际 操作 


的 时 候 ， 可 以 根据 需要 设置 不 同 的 表格 属性 参数 和 选择 不 同 的 图 片 来 做 导航 。 


Top php* x 


ody? Cable) Ca 14 


DW 文件 (F) ROO EV ACD MERO) 格式 (0) tO 站 点 G) Eno Ebo NE O- à- 设计 器 - 


C: Va chelht docs Vsbop V top. php. 


D O Mom Iia. C sm MEETAM | 


352205 
JADE WEN 


2 下 
219v 58 - 
D hd 


v|go BRO 


(k]£y Q 10» -| w Wi NN, 53 x 421 29 K / 1.5. 简体 中 文 (82312) 


站 BI iiuisemo[| |] 


LN TRIODO REGI] 
标题 全 ) 口 
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100 单 击 选择 第 1 行 第 1 个 单元 格 ， 执 行 菜单 “ 扣 


图 4-34 ”制作 的 网 页 效果 


FE 入” 一“ 表格” 命令， 打开 “ 表 


HH 


格 ”对 话 柜 ， 在 “ 行 数 ”文本 框 中 ， 输 入 需要 
入 需要 插入 表格 的 列 数 为 2， 在 “表格 宽度 ”文本 


粗细 ”“ 单 元 格 边 距 ”和 “单元 格 间距 ”都 为 0; 其 


所 示 。 
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重 入 表格 的 行 数 为 2; 在 “ 列 ” 文 本 框 中 ， 输 


框 中 输入 100 并 选择 “百分比 ”; “边框 
他 设置 保持 默认 值 。 具 体 设置 如 图 4-35 


行 数 : [2 


表格 宽度 : [100 - 
边框 粗细 : p | 
单元 格 边 距 : o | 
swa. | 


4-35 加 入 新 


的 表格 


11) 单 击 “ 确 定 ” 按 钮 加 入 表格 ， 然 后 朋 


引 单 击 “ 拆 分 ”按钮 ， 在 <td> 中 加 入 


valign="bottom" 代 码 ， 意 思 是 让 加 入 的 表格 能 居 下 对 齐 ， 如 


图 4-36 所 示 。 


B C: \Apache\htdocs\shopitop. php* 
</head> 
<body>» 

<table width="766" border="0" align= 
"center" cellpadding="0" cellspacing-"0"» 
<tr> 

<td height-z^81" colspan-^2" gn- 

J E TISTTWE ackgeround=" images/bannert af» 

<table width-" 766"  heightz"48" border-"0* 
cellspacing-"0' cellpadding-"0"» 

<tr> 
<td widthz"187^ height="24">&nbsp: 


5 
6 


JA 


brid 


<td width="579"> 


« e(r) $ € «4 o0tet i» D» 


DJE 


si co 


NE 


Body? <table Ct» Ct] 


s Op ja au 
aoo .| w m 


idi 


380 x 252v 29 K / 1 秒 | 简体 中 文 (6B2312) 


图 4-36 居 下 对 齐 设 


12) 单 击 “设计 ”按钮 ， 返 回 文 档 窗 
字 内 容 “ 首 页 | 最 新 婚纱 | 推荐 品牌 | 热门 品牌 


JE", 即 设计 完成 top.php， 效 果 如 图 4-37 所 示 。 


， 在 新 加 入 表格 的 第 2 行 第 2 列 输入 导航 的 文 


产品 分 类 | 用户 中 心 | 订单 查询 | 购物 
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M c: nachevhtsocs\shoz\top php 


| body? «tube 65 «G5 Cable ^K] xo Qux vi 802 x 269v 29 K / 1 f^ 薄 体 中 文 (552312)| .: 


-0x 


图 4-37 加 入 导航 的 效果 
13) 在 制作 的 过 程 中 ， 每 完成 一 部 分 的 设计 ， 都 需要 发 布 到 IE 进行 浏览 ， 


看 看 设计 的 


效果 如 何 ， 避 免 出 现 错误 ， 如 果 设 计 出 现 问题 要 及 时 修改 。 在 地 址 栏 输入 


http://127.0.0.1/shop/top.php， 即 可 预览 制作 的 效果 ， 效 果 如 图 4-38 所 示 。 


J UPATI - Hicrosoft Internet Erplorer 
KFE RBE EEV GEO) IAM 帮助 00 
-o6-im9i3 6| Pst zraz 0A- & (a (4 


Æ e 7/1210: 0: 1/shep/ top. php 


首页 ; 最 新 婚纱 ; 推荐 品牌 ; 热门 品牌 ; 产品 分 类 ; 用 户 中 心 ; 订单 查询 ; 购物 车 


图 4-38 预览 制作 的 效果 


42.4 导航 菜单 leit_ImentDiD 


包括 了 购物 车 、 用 户 系统 和 站 内 搜索 系统 三 个 模块 。 
l. 购物 车 模块 


入 表单 ， 有 具体 的 操作 步骤 如 下 : 


D 执行 菜单 “文件 ”一 “新 建 ”命令 ， 打 开 “ 新 建文 要 ”对 话 框 ， 在 “ 罕 


制作 的 left menu.php 是 被 index.php 页 面 导入 使 用 的 ， 即 几 个 功能 模块 的 搭建 ， 实 例 中 


首先 来 搭建 购物 车 模块 ， 购 物 车 模块 用 于 显示 用 户 网 上 定购 的 一 些 数据 ， 并 不 需要 插 


页 ”选项 


卡 中 ， 选 择 “ 页 面 类 型 ”选项 组 中 的 “PHP” 选 项 ， 在 “布局 ”中 选择 “无 ”选项 ， 单 击 


“创建 ”按钮 ， 即 在 Dreamweaver CS6 中 创建 了 一 个 PHP 页 面 ， 首 先 将 文档 保存 为 


left menu.php， 然 后 单 击 “ 拆 分 ”按钮 ， 将 所 有 的 代码 删除 。 


2) 执行 菜单 “插入” 一“ 表格” 命令， 打开 “表格 ”对 话 框 ， 在 “ 行 数 ” 文 本 框 中 ， 
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输入 需要 插入 表格 的 行 数 为 3;， 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 列 数 为 1; dE R 
格 宽度 ”文本 框 中 输入 209 并 选择 “像素 ”; “边框 粗细 ”“ 单 元 格 边 距 ” 和 “单元 格 间距 ” 
都 为 0; 其 他 设置 保持 默认 值 ， 设 置 完成 后 单 击 “ 确 定 ” 按 钮 。 在 table 属性 中 加 入 
bgcolor="#FOFOF0" 设 置 背 景色 后 的 效果 如 图 4-39 所 示 。 


图 4-39 创建 新 表格 效果 


3) 设置 好 表格 属性 后 ， 还 要 在 表格 内 峰 套 一 个 表格 。 单 击 “ 设 计 ” 按 钮 ， 首 先 在 第 1 
列表 格 嵌 套 一 个 2 行 1 列 的 表格 ， 执 行 菜单 “插入 ”一 “表格 ”命令 ， 打 开 “ 表 格 ” 对 话 
框 ， 在 “ 行 数 ”文本 框 中 ， 输 入 需要 插入 表格 的 行 数 为 2;， 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插 
入 表格 的 列 数 为 1; 在 “表格 宽度 ”文本 框 中 输入 100 并 选择 “百分比 ”; “边框 粗细 ”“ 单 
元 格 边 距 ” 和 “单元 格 间距 ”都 为 0， 其 他 的 保持 不 变 。 具 体 设 置 如 图 4-40 所 示 。 


图 4-40 IRA KIK JE E E 
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4) 单 击 “ 确 定 ” 按 钮 ， 完 成 此 操作 。 单 击 选 择 第 1 行 表格 ， 选 择 荣 单 栏 上 的 “插入 ” 
一 “图 像 ” 命 令 。 在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 中 要 插入 的 图 片 carttop.jpg， 
单 击 “确定 ”按钮 就 可 以 完成 图 片 的 插入 操作 ， 如 图 4-41 所 示 。 


选择 图 像 源 文件 5f 


(Qu 


209 x 46 JPEG, IS K / 1 


XE: [MPX (t. cif: jpe:*. ipee oct IB] 


图 4-41 插入 购物 车 图 片 


5) 设置 好 第 一 行 表 格 后 ， 单 击 选 择 第 2 行 表 格 ， 输 入 说 明文 本 “用 户 : 游客 ， 欢 迎 
您 ! 购物 车 总 计 : 0 元 去 收银 台 清空 购物 车 ” 如 图 4-42 所 示 。 


图 4-42 表格 第 2 行 的 文本 输入 


2. 用 户 系统 模块 


设计 用 户 注 册 系统 模块 。 由 于 该 模块 是 动态 交互 的 部 分 ， 所 以 需要 加 入 表单 (E 
HTML 中 ， 表 单 拥有 一 个 特殊 功能 ， 即 支持 交互 作用 。 除 了 表单 之 外 其 他 任何 的 HTML 元 
素 ， 都 可 以 嵌入 到 表单 中 进行 页 面 的 设计 。 单 击 提交 表单 按钮 ， 可 以 将 动态 元 素 由 表单 传递 
给 服务 器 进行 处 理 ， 并 将 处 理 的 动态 结果 返回 网 页 进行 显示 。 
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下 面 就 开始 进行 用 户 系 统 模块 的 搭建 ， 具 体 的 操作 步骤 如 下 : 

1) 单 击 选择 制作 的 第 一 个 表格 的 第 2 行 表格 ， 单 击 “ 表 单 ” 插 入 面板 中 的 “表单 ” 
按钮 ， 或 执行 荣 单 栏 上 的 “插入 ”一 “表单 ”命令 ， 插 入 一 个 表单 对 象 。 插 入 表单 后 ， 页 面 
中 会 出 现 一 个 红色 的 框框 ， 表 单 规定 了 放置 表单 对 象 的 区 域 ， 其 对 应 的 HTML 标识 符 是 
<form></form>， 加 入 表单 的 操作 及 加 入 之 后 的 效果 如 图 4-43 所 示 。 


| 


Ed] 4-43 ”加 入 表单 的 操作 及 加 入 之 后 的 效果 


2) 在 表单 中 执行 菜单 “搬入” 一“ 表格” 命令， 打开“ 表格 ”对 话 框 ， 在 “ 行 数 ” 文 
本 框 中 ， 输 入 需要 插入 表格 的 行 数 为 5. 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 列 数 为 
2; 在 “表格 宽度 ”文本 框 中 输入 100 并 选择 “百分比 ”; “边框 粗细 ”“ 单 元 格 边 距 ” 和 “ 单 
元 格 间 距 ” 都 为 0， 其 他 的 保持 不 变 。 具 体 设置 如 图 4744 所 示 。 


行 数 : 5 列 : 2 
表格 宽度 : 100 
边框 粗细 :; 0 

单元 格 边 距 : 0 


单元 格 间距 : 0 


图 4-44 设置 插入 表格 的 属性 
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3) 单 击 “ 确 定 ” 按 钮 ， 即 建立 了 一 个 5 行 2 列 的 表格 。 在 “属性 ”面板 中 ， 设 置 对 齐 
方式 为 “居中 对 齐 ”， 拖 动 鼠标 选择 第 一 行 的 表格 ， 在 “属性 ”面板 中 ， 单 击 “ 合 并 单元 
格 ” 按 钮 图 ， 将 第 1 行 表格 合并 。 合 并 后 选择 菜单 栏 上 的 “插入 ”一 “图 像 ” 命 令 。 在 打 
开 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 中 要 插入 的 图 片 user.gif， 单 击 “ 确 定 ” 按 钮 就 可 以 
完成 图 片 的 插入 操作 ， 如 图 4-45 所 示 。 


选择 图 像 源 文件 


远近 文件 各自 : ESLER 
CREE. 


Í (CO Hoscu 


209 x 46 GIF, 4K/1 


图 4-45 ”插入 用 户 系统 图 片 


4) 在 第 2 行 第 1 列 中 ， 输 入 说 明文 字 “ 用 户 :”， 然 后 在 第 2 列 执行 业 单 “插入 ”一 
“表单 ”一 “文本 域 ”命令 ， 插 入 一 个 单行 文本 域 表 单 对 象 ， 并 定义 文本 域名 为 username, 
“文本 域 ”属性 设置 及 此 时 的 效果 如 图 4-46 所 示 。 


图 4-46 输入 “用 户 ” 和 插入 “文本 域 ”的 设置 


设置 文本 域 的 属性 说 明 如 下 : 
e 在 “文本 域 ” 文 本 框 中 ， 可 以 为 文本 域 指定 一 个 名 称 。 每 个 文本 域 ， 都 必须 有 一 个 
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唯一 的 名 称 。 表 单 对 象 名 称 不 能 包含 空格 或 特殊 字符 ， 可 以 使 用 字母 、 数 字 、 字 符 
AFER C) 的 任意 组 合 。 请 注意 为 文本 域 指定 的 标签 ， 是 存储 该 域 的 值 ( 输 入 
的 数据 ) 的 变量 名 ， 这 是 发 送 给 服务 器 进行 处 理 的 值 。 
e 字符 宽度 设置 文本 域 中 最 多 可 显示 的 字符 数 。“ 最 多 字符 数 ” 指 定 在 文本 域 中 最 多 
可 输入 的 字符 数 ， 如 果 保 留 为 空白 ， 则 输入 不 受 限 制 。“ 字 符 宽度 ”可 以 小 于 “最 多 
字符 数 ”， 但 大 于 字符 宽度 的 输入 将 不 被 显示 。 
e 类 型 : 用 于 指定 文本 域 是 “单行 ”““ 多 行 ”还 是 “密码 ” 通常 ,“ 单 行 ” 只 能 显示 一 
行文 字 ;“ 多 行 ” 则 可 以 输入 多 行文 字 ， 达 到 字符 宽度 后 换行 ;“ 密 码 ” 文 本 域 ， 则 
用 于 输入 密码 。 
e 初始 值 : 指定 在 首次 载 入 表单 时 ， 域 中 显示 的 值 。 例 如 ， 通 过 包含 说 明 或 示例 值 ， 
可 以 指示 用 户 在 域 中 输入 信息 。 
@ 类 : 可 以 将 CSS 规则 ， 应 用 于 不 同 的 对 象 。 
5) 学 习 了 文本 域 的 属性 之 后 ， 要 在 第 3 行 第 1 列表 格 中 输入 说 明文 字 “ 密 码 ” 在 第 3 
行 表格 的 第 2 列 中 ， 执 行 菜单 “插入 ”一 “表单 ”一 “文本 域 ” 命 令 ， 插 入 密码 文本 域 表 单 
对 象 ， 定 义 “ 文 本 域 ” 名 为 userpwd。“ 文 本 域 ”属性 设置 及 此 时 的 效果 如 图 4-47 所 示 。 


图 4-47 密码 “文本 域 ”的 设置 
6) 在 第 4 行 第 1 列表 格 中 输入 说 明文 字 “验证 ” 在 第 4 行 表格 的 第 2 Jr, PUT 


单 “ 插 入 ”一 “表单 ”一 “文本 域 ” 命 令 ， 插 入 密码 文本 域 表 单 对 象 ， 定 义 “ 文 本 域 ”名 为 
yz。“ 文 本 域 ”属性 设置 及 此 时 的 效果 如 图 4-48 所 示 。 


图 4-48 设置 验证 码 文 本 域 
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7) 选择 第 5 行 第 1 个 单元 格 ， 执 行 菜单 “插入 ”一 “表单 ”一 “按钮 ”命令 ， 插 入 一 
个 按钮 ， 并 在 “属性 ”面板 中 ， 设 置 “ 值 ”为 “登录 ”， “动作” 为 “提交 表单 ”。 具 体 设置 
如 图 4-49 所 示 。 


图 4-49 设置 按钮 名 称 和 值 


8) 选择 第 4 行 第 2 个 单元 格 ， 输 入 将 用 于 链接 的 文字 “注册 ， 找 回 密码 ” 完成 的 用 
户 系 统 模块 的 效果 如 图 4-50 所 示 。 


3. 站 内 搜索 模块 


搜索 系统 也 是 一 个 动态 交互 的 模块 ， 在 单 击 “ 站 内 搜索 ”按钮 的 时 候 ， 需 要 通过 表单 
提交 给 后 台 进 行 处 理 ， 所 以 也 需要 插入 表单 ， 产 品 搜索 系统 设计 步骤 如 下 : 

1) 在 第 一 个 表格 第 3 行 中 ， 执 行 菜单 “插入 ”~ 一“ 表格” 命令， 打开 “表格 ”对 话 
框 ， 在 “ 行 数 ”文本 框 中 ， 输 入 需要 插入 表格 的 行 数 为 2;， 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插 
入 表格 的 列 数 为 1; 在 “表格 宽度 ”文本 框 中 输入 209 并 选择 “像素 ” “边框 粗 细 ”“ 单 元 
格 边 距 ” 和 “单元 格 间距 ”都 为 0， 其 他 的 保持 不 变 。 有 具体 设置 如 图 4-51 所 示 。 


行 数 : ] 列 :[! |] 
表格 宽度 [209 |mm — wj 
p] 


BI 4-50 ”完成 的 用 户 系 统 模块 的 效果 图 4-51 设置 插入 表格 的 属性 


2) 单 击 Eod 按钮 ， 即 建立 了 一 个 2 行 1 列 的 表格 ， 在 “属性 ”面板 中 ， 设 置 对 齐 
方式 为 “居中 对 齐 ” 选择 菜单 栏 上 的 “插入 ”一 “图 像 ” 命 令 。 在 打开 的 “选择 图 像 源 文 
件 ” 对 话 框 中 ， 选 中 要 插入 的 图 片 search.gif， 单 击 “ 确 定 ” 按 钮 就 可 以 完成 图 片 的 插入 操 
作 ， 如 图 4-52 所 示 。 
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选择 图 像 源 文件 
沈 拓 文件 名 自 : @ 文件 系统 HABHK 
ii 站 点 和 服务 器 


mam Nosru 


图 4-52 插入 站 内 搜索 图 片 


3) 选择 刚 创建 的 表格 的 第 2 行 ， 再 单 击 “ 表 单 ” 插 入 面板 中 的 “表单 ” 回 按钮 ， 或 执 
行 菜单 栏 上 的 “插入 ”一 “表单 ”命令 ， 插 入 一 个 表单 对 象 ， 加 入 表单 之 后 的 效果 如 图 4-53 
所 示 。 


图 4-53 ”加 入 表单 的 效果 


4) 在 第 2 行 表单 中 ， 执 行 菜单 “插入 ”一 “表单 ”一 “文本 域 ” 命 令 ， 捅 入 一 个 单行 
文本 域 表 单 对 象 ， 并 定义 文本 域名 为 name,“ 字 符 宽度 ”为 12,“ 文 本 域 ”属性 设置 及 此 时 
的 效果 如 图 4-54 所 示 。 


图 4-54 关键 词 文 本 域 的 设置 及 效果 


5) 执行 菜单 “插入” 一“ 表单” 一“ 按钮” 命令， 插入 一 个 按钮 ， 并 在 “属性 ”面板 
中 设置 “ 值 ”为 “搜索 “动作 ”为 “提交 表单 ” 具体 设置 如 图 4-55 所 示 。 
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misme —— &vo»t — |] 。 动作 @O 提 六 表单 6) O 无 ROE v] 


口 重 设 表单 M) 


图 4-55 设置 按钮 名 称 和 值 


6) 执行 菜单 “插入 ”一 “表单 ”一 “按钮 ”命令 ， 插 入 一 个 按钮 ， 并 在 “属性 ”面板 
中 设置 “ 值 ”为 “高 级 ” “动作 ”为 “无 ”具体 设置 如 图 4-56 所 示 。 


图 4-56 设置 按钮 名 称 和 值 


7) 执行 菜单 栏 上 的 “文件 ”一 “保存 ”命令 ,将 制作 的 内 容 保存 。 在 地 址 栏 输入 
http://127.0.0.1/shop/left_ menu.php， 即 可 预览 制作 的 效果 ， 效 果 如 图 4-57 所 示 。 


È http://127. 0. 0. IV shop/ left_aenu- php icros 
文件 9) 4o EEV RRA IAT) 帮助 00 


Ost-O-a8a6|P^s* ze o|- & (2 (8 


图 4-57 ”预览 制作 模块 的 效果 


4.2.0 底部 版 权 bottom.php 


制作 到 这 一 步骤 ， 一 个 网 页 的 效果 已 经 基本 完成 ， 还 需要 加 入 最 后 的 版 权 部 分 ， 即 可 
完成 整个 网 页 的 设计 。 该 实例 的 版 权 部 分 设计 得 比较 简单 ， 直 接 用 一 张 已 经 设计 好 的 图 片 表 
示 ， 接 上 面 的 制作 步骤 ， 直 接 加 入 一 个 766 像素 的 表格 ， 插 入 bottom.gif 文件 ， 并 输入 一 些 
购物 常用 的 说 明文 字 即 可 完成 ， 整 体 的 效果 如 图 4-58 所 示 。 
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了 页 | 全 业 障 介 | META | 招聘 岗位 | 联系 我 们 


K| 4-58 bottom.php 效果 图 


4.2.06 ”首页 的 合成 index.php 


在 设计 的 “页 面 内 容 ” 中 ， 新 闻 和 产品 模块 都 是 在 空白 背景 上 显示 的 ， 之 所 以 不 做 任 
何 的 背景 ， 是 因为 产品 图 片 和 新 闻 图 片 的 颜色 都 是 很 多 种 的 ， 从 网 页 的 配色 来 看 ， 只 有 使 用 
白色 作 背 景 ， 才 能 使 整体 设计 效果 看 上 去 比较 协调 。 

1) index.php 页 面 中 需要 将 前 面 制作 的 top.php、left menu.php 和 bottom.php 全 部 先入 
到 页 面 中 ， 嵌 入 的 关系 如 图 4-59 所 示 。 在 PHP 中 航 套 的 代码 非常 简单 ， 使 用 <?php 
include("");?> 即 可 轻松 实现 。 


top.php 


left menu.php 


index.php 


图 4-59 ”网 站 首页 藤 套 的 结构 图 
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20 执行 菜单 “文件 ”一 “新 建 ” 命 令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 在 “空白 页 ”选项 
卡 中 ， 选 择 “ 页 面 类 型 ”选项 组 中 的 “PHP” 选 项 ， 在 “布局 ”中 选择 “无 ”选项 ， 单 击 
“创建 ”按钮 ， 即 在 Dreamweaver CS6 中 创建 了 一 个 PHP 页 面 ， 首 先 将 文档 保存 为 
index.php， 单 击 “ 拆 分 ”按钮 ， 将 所 有 的 代码 删除 。 

3) 按 图 4-59 所 示 ， 只 需要 在 页 面 中 创建 一 个 3 
fr 2 列 的 表格 即 可 ， 第 1 TE top.php 页 面 ， 第 
行 第 1 IRE left menu.php 页 面 ， 第 2 行 第 2 列 在 
本 页 上 创建 对 象 ， 第 3 fTHCES bottom.php 页 面 。 执 行 
荣 单 “插入 ”一 “表格 ”命令 ， 打 开 “ 表 格 ” 对 话 
框 ， 在 “ 行 数 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 行 数 
为 3; 在 “ 列 ” 文 本 框 中 ， 输 入 需要 插入 表格 的 列 数 
为 2; 在 “表格 宽度 ”文本 框 中 输入 766 并 选择 “ 像 
素 ” “边框 粗细 ”“ 单 元 格 边 距 ” 和 “单元 格 间距 ”都 
为 0;， 其 他 的 保持 不 变 。 具 体 设 置 如 图 4-60 所 示 。 

4) 单 击 “确定 ”按钮 ， 即 建立 了 一 个 3 行 2 列 
的 表格 ， 在 “属性 ”面板 中 ， 设 置 对 齐 方式 为 “居中 E 
对 齐 ”， 同 时 合并 第 1 行 和 第 3 行 的 表格 。 再 单 击 SO ERHRAGERIUSTE 
“ 拆 分 ”按钮 ， 在 第 1 TAN CES: 


<?php 
include("top.php"); 
?> 


RERA wa 4-61 所 示 。 
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图 4-61 WA IB R 


5) JUR PA LIBI CEU TASSI — FER. ICHUSCAS BHISCEUASIA A. ERE REA E 
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简单 的 文字 和 图 片 编排 ， 完 成 的 最 后 效果 如 图 4-62 所 示 。 


图 4-62 i 


TE 


所 闻 模 块 和 产品 的 效果 


主页 排版 制作 完成 ， 按 下 快捷 键 〈F12;， 打 开 IE 浏览 器 进行 预览 。 或 者 在 地 址 栏 
中 ， 输 入 http://127.0.0.1/shop/index.php， 也 可 以 预览 主页 的 效果 ， 主 页 的 整体 效果 如 图 4-63 


所 示 。 


TR 
Xo) RET SEV GRN IAT) 帮助 00 


ose- o-a nejem xe el o NN 


去 收银 各 heas 


DEE e- 


有 Pa[ O ë 


图 4-63 网 页 编排 的 整体 效果 图 


暂 无 新 闻 公告 ! 
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操作 说 明 : 

通过 上 面 的 排版 制作 可 以 发 现 ， 在 IE 浏览 器 中 看 到 的 网 页 的 排版 ， 与 在 Dreamweaver 
软件 中 的 排版 是 一 样 的 。 其 实 ， 在 Dreamweaver 中 进行 排版 是 一 项 非常 细致 的 工作 ， 每 一 
个 图 片 和 表格 的 尺寸 都 需要 经 过 严格 的 定义 ， 也 只 有 这 样 才 能 制作 出 整齐 好 看 的 网 页 。 

其 他 的 一 些 网 页 排版 方法 均 大 同 小 异 ， 以 图 4-64 所 示 的 新 闻 网 页 效果 图 为 例 ， 导 航 和 
版 权 两 块 区 域 ， 可 以 直接 从 前 面 制作 的 网 站 首页 中 进行 复制 ， 对 于 中 间 部 分 ， 也 是 很 简单 的 
表格 排版 和 图 片 插入 操作 。 页 面 上 有 很 多 三 图 标 ， 每 个 图 标 都 表示 需要 插入 单独 的 PHP. di 
程 代 码 ， 用 于 实现 相应 的 动态 效果 。 


M cwipachevhtaocsvshop\eongeolist php Oum -0x 
ETA = 


bridal coutur 


Kl 4-64 新 闻 介 绍 网 页 编排 的 整体 效果 图 


由 于 篇 幅 的 关系 ， 就 不 一 一 介绍 各 个 网 页 的 搭建 方法 。 读 者 可 以 打开 光盘 中 的 站 点 ， 
查看 各 个 页 面 的 排版 效果 ， 也 可 以 根据 自己 的 风格 和 要 求 进行 单独 的 设计 。 


4.3 网 页 的 样式 美化 


在 创建 首页 面 的 搭建 过 程 中 ， 细 心 的 读者 会 发 现 预览 的 网 页 有 很 多 细节 方面 的 问题 ， 
如 网 页 文字 不 统一 ， 输 入 的 文本 框 和 整体 网 页 的 设计 不 和 谐 等 。 浏 览 者 想 要 看 的 是 网 页 上 的 
内 容 结构 ， 而 为 了 让 浏览 者 更 好 地 看 到 这 些 信息 ， 就 要 通过 格式 控制 来 实现 了 。 以 前 两 者 在 
网 页 上 的 分 布 是 交错 结合 的 ， 查 看 或 者 修改 很 不 方便 ， 而 现在 把 两 者 分 开 就 会 大 大 方便 网 页 
的 设计 者 。 内 容 结 构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 只 由 内 容 构 成 ， 而 将 所 有 网 页 的 格式 
控制 指向 某 个 CSS 样式 表 文 件 。 

下 面 就 简单 的 介绍 一 下 ， 如 何在 Dreamweaver CS6 中 进行 自 定义 CSS 样式 ， 并 通过 实 
例 讲解 如 何 应 用 CSS 美化 网 页 。 


N 
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4.3.1 美化 大 师 GS 


CSS 对 于 设计 者 来 说 是 一 种 非常 灵活 的 工具 ， 不 必 再 把 繁杂 的 样式 定义 编写 在 文档 
中 ， 可 以 将 所 有 有 关 文 档 的 样式 指定 内 容 全 部 脱离 出 来 ， 在 行 定 义 、 在 标题 中 定义 ， 甚 至 作 
为 外 部 样式 文件 供 HTML 调用 。 简 单 地 说 ， 在 制作 网 站 的 时 候 ， 可 以 使 用 外 部 的 CSS 功能 
来 美化 网 页 的 效果 。 

CSS (Cascading Style Sheets) 层 车 样式 表 可 以 使 页 面 完 全 按照 制作 者 的 设想 显示 ， 可 
以 对 网 页 上 的 元 素 精 确 地 定位 ， 并 且 轻 易 地 控制 文字 、 图 像 等 各 种 对 象 。 它 是 现在 广泛 使 用 
的 一 种 格式 控制 技术 。 

使 用 CSS 的 好 处 表现 在 两 个 方面 : 

第 一 : 简化 了 网 页 的 格式 代码 ， 外 部 的 样式 表 被 浏览 器 保存 在 缓存 里 ， 加 快 了 下 载 显 
示 的 速度 ， 同 时 减少 了 需要 上 传 的 代码 数量 〈 因 为 重复 设置 的 格式 将 被 只 保存 一 次 )。 

第 二 : 只 要 修改 保存 着 网 站 格式 的 CSS 样式 表 文 件 就 可 以 改变 整个 站 点 的 风格 特色 ， 
这 在 修改 页 面 数 量 庞大 的 站 点 时 ， 显 得 格外 有 用 。 避 免 了 一 个 一 个 网 页 的 修改 ， 大 大 减少 了 
重复 劳动 的 工作 量 。 

Dreamweaver CS6 提供 了 对 CSS 样式 创建 的 完美 支持 ， 利 用 Dreamweaver CS6， 用 户 不 
需要 了 解 CSS 复杂 繁琐 的 语法 ， 就 可 以 创建 出 具有 专业 风格 的 CSS 样式 。 不 仅 如 此 ， 
Dreamweaver CS6 还 能 够 识别 现存 文档 中 定义 的 CSS 样式 ， 这 更 方便 用 户 对 现 有 文档 进行 
修改 。 

4.3.2 AEX (S 样式 

自 定 义 CSS 样式 是 最 常用 的 一 种 CSS 样式 创建 方式 ， 方 法 是 将 一 系列 格式 组 合 起 来 ， 
并 以 适当 的 形式 命名 。 要 创建 自 定 义 CSS 样式 ， 其 具体 的 操作 步骤 如 下 : 

1) 打开 Dreamweaver CS6 软件 ， 选 择 菜 单 栏 上 的 “窗口 ”一 “CSS 样式 ”命令 ， 打 开 
“CSS 样式 ”面板 ， 如 图 4-65 所 示 。 


| 
| 


Eue) en2s 


图 4-65 "CSS 样式 ”面板 
2) Æ “CSS 样式 ”面板 中 ， 可 以 用 三 种 方法 打开 “新 建 CSS 规则 ”对 话 框 ， 可 执行 如 
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下 操作 之 一 : 
O 单 击 该 面板 底部 的 “新 建 CSS 规则 ”图 标 圈 |. 
© 单 击 该 面板 顶部 右边 的 按钮 国 ， 从 打开 的 下 拉 菜 单 中 选择 “新 建 ”命令 。 
© 在 该 面板 内 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 “新 建 ” 命 令 。 
通过 以 上 方法 都 可 以 打开 “新 建 CSS 规则 ”对 话 框 ， 如 图 4-66 所 示 。 


IHI 
y 


Er css 规则 


规则 定义 : 
选择 定义 规则 的 位 置 。 


CBRIEXCSD E 


图 4-66 “新 建 CSS 规则 ”对 话 框 


3) 在 “选择 器 类 型 ”选项 组 中 ， 单 击 选择 “类 《可 应 用 于 任何 HTML 元 素 )” 下 拉 列 
表 项 ， 用 来 建立 一 种 由 自己 定制 的 样式 表 。“ 类 ”由 用 户 自己 给 定 样 式 表 元 素 名 称 ， 并 且 可 
以 在 整个 HTML 中 被 调用 。 有 一 点 值得 注意 的 是 ， 当 新 建 样式 时 ， 默 认 的 样式 名 称 是 
“unmaned1”， 在 此 样式 名 称 前 有 一 个 “.”， 这个“.” 说 明了 此 样式 是 一 个 类 样式 
(CLASS)。 根 据 Css 规则 ， 类 样式 (CLASS) 可 以 在 一 个 HTML 元 素 中 被 多 次 调用 。 

4) 在 “名 称 ” 文 本 框 中 设置 样式 的 名 称 ， 这 里 输入 名 为 font。 

5) 在 “规则 定义 ”选项 组 中 ， 单 击 选择 “(新 建 样式 表 文 件 )” 下 拉 列 表 项 ， 此 时 “新 
建 CSS 规则 ”对 话 框 如 图 4-67 所 示 。 


Ia css Jai 


选择 器 类 型 : 
为 css 规则 寺 择 上 下 文选 择 器 类 型 。 
[zs C 可 应 用 于 任何 vw. 元 素 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 
[£n 


此 选择 器 名 称 梅 规则 应 用 于 
MAR 


有 闫 "font "的 HIML ER. 


图 4-67 设置 “新 建 CSS 规则 ”对 话 村 


IHI 
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6) 因为 是 在 该 文档 中 第 一 次 建立 样式 ， 因 此 ， 单 击 “ 确 定 ” 按 钮 后 ， 会 打开 “将 样式 
表 文 件 另存 为 ”对 话 框 ， 单 击 选择 “保存 在 ” 右 侧 的 下 拉 三 角 按 钮 ， 选 择 样式 保存 的 文件 夹 
为 css， 输 入 文件 名 为 font， 其 他 的 保持 默认 值 ， 如 图 4-68 所 示 。 


将 样式 表 文件 另存 为 


选择 文件 名 自 : 加 文件 系统 
Cen 


amio. TE 


zego: C 
保存 类 型 0) | 样式 表 文件 @ cs) M a (mm ] 


m. 
wr [xs — Wi 


在 站 点 定义 中 更 改 默认 的 链接 相对 于 


图 4-68 “保存 样式 表 文 件 为 ”对 话 术 


Fil 


7) 设置 完成 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 打开 “.font 的 CSS 规则 定义 (在 font.css 
中 )” 对 话 框 ， 如 图 4-69 所 示 。 


- font 的 CSS 规则 定义 (在 font -css 中 ) 
类 型 
mo — = F 
xro: Dmm o — 国 
"o E =v- E 
sso[  WimmmmEso|  W 


fth D: 加 下划线 Beo: m[ ] 
Ex 0) 
Daneu 
Fo 
四 无 四 


图 4-69 “font 的 CSS 规则 定义 〈 在 font.ess H) ”对 话 框 


8) 最 后 根据 自己 设计 网 页 的 需要 ， 分 别 选择 “分 类 ” 下 面 的 列 选 项 ， 在 “类 型 ”下 面 
的 选择 项 中 分 别 设置 其 属性 ， 如 “大 小 ”“ 颜 色 ” 等 需要 统一 的 样式 。 设 置 完成 后 单 击 “ 确 
定 ” 按 钮 ， 即 在 css 文件 夹 下 面 创建 了 fontcss 文件 。 创 建 完成 font.ess 文件 之 后 ， 在 首页 中 
会 自动 创建 使 用 font.css 样式 的 链接 代码 ， 如 图 4-70 所 示 。 
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fic Vrseheht dcos inder sho Gama) 


BẸKlink href= è 

eflex. js )</ script 

order="0" align="center" 
acingz"0* 


td widthz"209* 
"SFÜFOÜFC ><?php 
td width 


t 


td heightz"30" colrpans"2" 


RRK: 


"gonggsolist.php OMS.. YDY d 
ftr 


EE Goles o ct 3 c 


43.9. ”网 站 首页 的 美化 


为 了 让 


站 首页 ， 


其 体 的 操作 步骤 如 下 : 


(MEER font osse font’ .ess reflex js toph left nem php bot 


aj : 
E] 
Qa 


DE Wers: 网 元 


tom. php 


| Sesh | 


w US 新 闻 : 


Q sss 


ERRE ATORE 4». 


nyae F 


hm -加 同 KEE MEG 


图 4-70 首页 与 样式 文件 font.css 的 链接 代码 


1) 在 Dreamweaaver CS6 中 打开 font.ess 样式 表 文 件 ， 输 入 如 下 的 档 
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A:link { 
COLOR: #990000; 
TEXT-DECORATION: none 


} 
A:visited { 


器 作 的 网 站 首页 更 加 的 引入 注目 ， 可 以 应 用 CSS 对 首页 进行 进一步 的 美化 ， 包 
括 背 景 的 样式 设计 、 各 模块 的 样式 设计 、 统 一 链接 的 样式 等 ， 下 面 就 开始 使 用 CSS 美化 网 


lf 式 控制 代码 : 


COLOR: #990000; TEXT-DECORATION: none 


} 


A:active { 


COLOR: #990000; TEXT-DECORATION: none 


j 
A:hover { 


COLOR: #000000 
j 
/网 页 链接 属 
body 1 
margin-top: Opx; 

j 

td,th { 
FONT-SIZE:12px; 
COLOR: #000000; 

j 

/网 页 的 整体 属性 控制 


.buttoncss { 


性 设置 


"onec 


font-family: "Tahoma", "宋体 "; 
font-size: 9pt; color: 4003399; 
border: 1px £fff solid; 
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color:006699; 
BORDER-BOTTOM: #93bee2 1px solid; 
BORDER-LEFT: #93bee2 1px solid; 
BORDER-RIGHT: #93bee2 1px solid; 
BORDER-TOP: #93bee2 1px solid; 
background-color: #ccc; 
CURSOR: hand; 
font-style: normal ; 
} 
.inputcss { 
font-size: 9pt; 
color: #003399; 
font-family: "宋体 "; 
font-style: normal; 
border-color: #93BEE2 #93BEE2 £93BEE2 #93BEE2 ; 
border: 1px 493BEE2 solid; 
} 
nputcssnull { 
font-size: Opt; 
color: #003399; 
font-family: "宋体 "; 
font-style: normal; 
border: Opx 493BEE2 solid; 
} 
.scrollbar{ 
SCROLLBAR-FACE-COLOR: #FFDD22; 
FONT-SIZE: 9pt; 
SCROLLBAR-HIGHLIGHT-COLOR: £69BC2C; 
SCROLLBAR-SHADOW-COLOR: 269BC2C; 
SCROLLBAR-3DLIGHT-COLOR: 269BC2C; 
SCROLLBAR-ARROW-COLOR: 7ffffff; 
SCROLLBAR-TRACK-COLOR: 269BC2C; 
SCROLLBAR-DARKSHADOW-COLOR: 269BC2C 


j 


.scrollbar( 
SCROLLBAR-FACE-COLOR: ZFFDD22; 
FONT-SIZE: 9pt; 
SCROLLBAR-HIGHLIGHT-COLOR: #69BC2C.; 
SCROLLBAR-SHADOW-COLOR: #69BC2C.; 
SCROLLBAR-3DLIGHT-COLOR: #69BC2C; 
SCROLLBAR-ARROW-COLOR: Zffffff; 
SCROLLBAR-TRACK-COLOR: £69BC2C; 
SCROLLBAR-DARKSHADOW-COLOR: #69BC2C 


) 
/网 页 表单 对 象 的 样式 设置 
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2) 切换 回 index.php 页 面 ， 选 择 <body> 标 签 ， 然 后 用 鼠标 右键 单 击 选 择 CSS 面板 中 的 
body 样式 ， 具 体操 作 如 图 4-71 所 示 。 


ARA ieten rite ETD bse pe betta pp 
"i 


3) 套用 后 ， 可 以 发 现 整个 网 页 按 样式 的 定义 加 入 了 背景 的 效果 。 用 同样 的 样式 定义 方 
法 ， 可 以 分 别 给 购物 车 、 用 户 系统 、 搜 索 系 统 等 模块 设计 不 同 的 样式 ， 以 达到 让 网 页 美化 的 
目的 。 由 于 操作 方法 都 一 样 ， 这 里 也 不 再 做 具体 的 介绍 。 打 开 fontess 样式 文档 ， 可 以 看 到 
里 面 不 同 的 定义 样式 ， 在 index.php 页 面 中 ， 找 到 相应 命名 的 Class 命名 ， 即 可 知道 该 实例 
使 用 了 哪些 具体 的 设计 ， 美 化 后 的 整体 效果 ， 即 最 终 完 成 的 网 页 美工 效果 如 图 4-72 所 示 。 


xmo ado seo 
Qsr-o-i2i3 6 P 54 
aO [M ue 27:0 0 Usb 


20134E3823H ge 


6 a mage | mmu | ANAR | FAHS | 用 户 中 心 | 可 单 查 询 | 风物 车 


» (meum seum 


„ERS "Reus" 

» GEGANA LOI EORR 

» Ber I ASENHST 
» WINS suos tI QN 
» WrotOE ER UR HT 

» WP -SFAT MARNA 


图 4-72 用 CSS 美化 后 的 网 页 效果 


到 这 一 步骤 ， 所 有 有 关 网 站 网 页 的 静态 部 分 的 设计 工作 全 部 完成 。 
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前 面 我 们 学 习 了 网 站 静态 页 面 的 制作 ， 但 是 要 创建 一 个 完美 的 、 吸 引 人 的 电导 


务 网 站 ， 适 当地 加 入 动画 效果 是 必 不 可 少 的 。 网 站 建设 已 经 从 简单 的 技术 支持 时 代 ， 


到 了 现在 的 视觉 美化 时 代 。 当 然 ， 如 何 让 设计 的 电子 商务 网 站 更 加 高 人 一 筹 ， 达 到 让 人 
过 目 不 态 的 效果 ， 以 及 如 何以 最 简单 的 特效 让 网 站 “ 亮 ” 起 来 ， 成 了 开办 成 功 电子 商务 
网 站 最 关心 的 话题 。 本 章 将 以 JavaScript 和 Flash 这 两 种 嵌入 技术 为 主 ， 介 绍 一 些 最 常用 


也 最 实用 的 特效 动画 制作 方法 。 
本 章 重 点 介绍 如 下 知识 : 

(— 网 站 的 动画 制作 技术 

(— 脚本 动画 的 上 误 入 

(— 炫 酷 的 Flash 动画 

(— Flash 动画 的 制作 


94 网 站 的 动画 制作 技术 


许多 网 站 的 设计 者 使 用 了 动态 GIF 图 片 和 Flash 动画 ， 这 样 的 技术 处 理 可 以 让 网 站 上 的 


图 片 或 文字 产生 动态 的 效果 。 这 虽然 增加 了 一 定 的 网 页 下 载 时 间 ， 但 它 会 吸引 用 户 对 网 站 信 


县 的 注意 力 。 创 建 网 站 的 技术 语言 有 很 多 种 ， 文 持 网 页 动画 的 主流 技术 是 和 谍 入 技术 。 赎 入 技 
术 是 指使 用 第 三 方 软件 或 其 他 的 编程 语言 ， 在 传统 的 HTML. 语言 中 插入 不 同 的 编程 对 象 ， 


从 而 达到 在 TE 浏览 器 中 实现 动画 效果 的 目的 。 
5.1.1 掌握 网 页 代码 标记 


要 应 用 动画 技术 ， 首 先 要 求 网 站 建设 者 具有 一 定 的 网 页 编程 基础 ， 能 看 得 懂 HTML 程 


序 ， 本 节 对 此 做 简单 介绍 。HTML 的 全 称 为 HyperText Mark-up Language， 可 以 翻译 为 


“F 


(53 


文本 标记 语言 >， 它 是 一 种 为 普通 文件 中 的 菜 些 字句 加 上 标记 的 语言 ， 其 目的 在 于 运 
记 ， 使 文件 达到 预期 的 显示 效果 。HTML 文件 的 基本 架构 如 下 : 


<HTML> 
<HEAD> 
<TITLE> 网 页 的 标题 </TITLE> 
</HEAD> 
<BODY> 


网 页 的 内 容 ， 很 多 标记 都 作用 于 此 


用 标 


= 
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</BODY> 
</HTML> 


整个 文件 处 于 标记 <HTML> 与 HTML> 之 间 ， 所 以 <HTML> 的 作用 就 是 向 网 页 浏览 器 
声明 这 是 HTML 文件 ， 让 浏览 器 认 出 并 正确 处 理 此 HTML 文件 。 

HTML 文件 分 两 部 分 ，<HEAD> 和 <HEAD> 之 间 的 内 容 为 文件 头 ，<BODY> 至 
</BODY> 之 间 的 内 容 为 文件 体 。 

文件 头 用 于 存 载重 要 信息 ， 而 上 只 有 文件 体会 在 网 页 中 显示 出 来 ， 所 以 大 部 分 标记 会 运 
用 于 文件 体 部 分 。 但 文件 头 部 分 也 很 重要 ， 比 如 <TITLE> 所 表示 的 是 文件 的 标题 ， 这 个 标题 
名 称 会 出 现 于 浏览 器 顶部 。 

HTML 常用 标记 ， 见 表 5-1. 
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表 5-1 HTML 常用 标记 


标 dd B X 作 
*HTML- 文件 声明 让 浏览 器 知道 这 是 HTML 文件 
<HEAD> 文件 头 提供 文件 整体 信息 
<TITLE> 标题 定义 文件 标题 ， 将 显示 于 浏览 器 顶端 
<BODY> 文件 体 设计 文件 格式 及 内 容 所 在 
<!-- 注 解 --> 注解 标记 为 文件 加 上 说 明 ， 但 不 被 显示 
<P> 段落 标记 为 字 、 画 、 表 格 等 之 间 留 一 空白 行 
<BR> 换行 标记 令 字 、 画 、 表 格 等 显示 于 下 一 行 
<HR> 水 平 线 插入 一 条 水 平 线 
<CENTER> 居中 令 字 、 画 、 表 格 等 显示 于 中 间 
<PRE> 预 设 格 式 令 文件 按照 原始 码 的 排列 方式 显示 
<DIV> 区 隔 标记 设 定 字 、 画 、 表 格 等 的 摆 放 位 置 
<B> 粗 体 标记 出 现 字 体 加 粗 的 效果 
< 斜体 标记 字体 出 现 斜 体 效 果 
<U> 加 上 底线 0 上 底线 
«HI» 级 标题 标记 将 字体 变 粗 变 大 加 宽 ， 程 度 与 级 数 成 反比 
<H2> -级 标题 标记 将 字体 变 粗 变 大 加 宽 ， 程 度 与 级 数 成 反比 
<H3> 三 级 标题 标记 将 字体 变 粗 变 大 加 宽 ， 程 度 与 级 数 成 反比 
<H4> 四 级 标题 标记 FE pede AE Kn. FEBRE S SUR SC EG 
«H5» 五 级 标题 标记 将 字体 变 粗 变 大 加 宽 ， 程 度 与 级 数 成 反比 
<H6> 六 级 标题 标记 将 字体 变 粗 变 大 加 宽 ， 程 度 与 级 数 成 反比 
<FONT> 字形 标记 设 定 字形 、 大 小 、 颜 色 
<TABLE> 表格 标记 设 定 该 表格 的 各 项 参数 
<CAPTION> 表格 标题 制作 成 一 列 以 填 入 表格 标题 
<TR> 表格 列 设 定 该 表格 的 列 
<TD> 表格 栏 设 定 该 表格 的 栏 
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CBE) 

标 dd 意 作 
<FORM> 表单 标 i 决 订单 一 表单 的 运作 模式 
<TEXTAREA> 文字 区 块 提供 文字 方 盒 以 输入 较 大 量 文 字 
<INPUT> 输入 标 i 决定 输入 形式 
<SELECT> 选择 标 i 建立 pop-up 卷 动 清单 
<OPTION> 选项 每 一 标记 标示 一 个 选项 
<IMG> 图 形 标 i 以 插入 图 形 及 设 定 图 形 属性 
<A> 连接 标 i 0 入 超级 链接 
<FRAMESET> 框架 设 定 设 定 框 架 
<FRAME> 框 窗 设 定 设 定 框 窗 
<IFRAME> 页 内 框 于 网 页 中 间 插 入 框架 
<NOFRAMES> 不 支持 框架 设 定 当 浏览 器 不 支持 框架 时 的 提示 
<MAP> 影像 地 图 名 称 设 定 影 像 地 图 名 称 
<BGSOUND> 背景 声音 播放 声音 或 音乐 
<EMBED> 多 媒体 加 入 声音 、 音 乐 或 影像 
<MARQUEE> 走动 文字 令 文 字 上 下 左右 走动 
<BLINK> 闪烁 文 字 闪烁 文字 
<META> 开头 定义 让 浏览 器 知道 这 是 HTML 文件 
<LINK> 关系 定义 定义 该 文件 与 其 他 URL 的 关系 
<STYLE> 样式 表 控制 网 页 版 面 
<span> 定 标 i 独立 使 用 或 与 样式 表 同 


5.1.2 ”网 站 动画 制作 技术 


入 技术 。 可 以 让 网 页 动 起 来 的 方法 还 是 有 


(1) 简单 的 GIF 动画 


GIF (Graphics Interchange Format) 是 一 利 


a 


Fh 图 片 格式 ， 它 的 原意 是 “图 像 互 换 格式 ” 是 


CompuServe 公司 在 1987 年 


Aue, HERA 


4 


E 50% 左 右 ， 并 且 不 


软件 都 支持 它 ， 公 共 领 域 中 有 大 量 


的 | GIF 


Dn B ERA 


像 数 ， 据 逐 幅 读 


i t 


LZ 


TÉ EH] GIF 动画 制作 。 


ik. GIF 最 多 支持 256 种 色彩 的 图 像 。GIF 格式 的 
彩色 图 像 ， 如 果 把 存 于 一 个 文件 中 的 多 幅 图 
最 简单 的 动画 。 如 图 5-1 所 示 的 一 个 简单 
需要 12 张 的 不 同 图 片 。 


压缩 的 ， 而 且 是 采用 了 可 变 长 度 等 ) 
日 个 GIF xY H 
出 并 显示 到 屏幕 上 ， 就 可 构成 一 种 

的 小 孩子 推 东 西 的 动作 ， 在 1 秒 钟 
GIF 分 为 静态 GIF 和 动画 GIF WP, REHE 
很 小 ， 网 上 很 多 小 动画 都 是 GIF 格式 。 
形成 动画 的 ， 所 以 归根 到 底 GIF m s 
较 多 的 ， 由 于 它 具 有 较 小 的 体积 ， 


的 GIF 动画 ， 就 


其 实 GIF 是 将 多 
片 文件 格式 。GIF 图 片 动画 在 网 站 中 的 应 用 也 是 比 
向 单 的 形象 动画 ， 比 如 网 站 变化 的 Logo， 就 经 


目前 在 Internet 网 上 创建 网 站 的 技术 语言 有 很 多 种 ， 能 支持 网 页 动画 的 主流 技术 就 是 幅 
民 多 种 的 ， 常 见 的 嵌入 技术 介绍 如 下 : 


FI. GIF 是 一 种 基于 LZW 算法 的 连续 色调 的 
属于 任何 应 用 程序 。 目 前 几乎 所 有 相关 


图 像 文件 。GIF 图 像 文件 的 数据 是 经 过 


9 景 图 像 ， 适 用 于 多 种 操作 系统 ， 体 型 
晶 图 像 保 存 为 一 个 图 像 文 件 ， 从 而 


= 
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图 5-1 GIF 动画 动作 分 解 


(2) CSS 样式 动画 

CSS 样式 动画 ， 在 第 4 章 也 介绍 过 了 ， 其 中 涉及 一 些 简单 的 网 页 文字 显示 触发 动画 ， 
主要 是 指 鼠 标 触发 动画 功能 ， 包 括 链接 的 变化 动画 、 鼠 标 显示 蔡 换 动画 等 ， 这 类 小 动画 应 用 
得 比较 多 。 

(3) JavaScript 特效 动画 

为 了 获得 交互 功能 ， 网 页 设计 者 开始 在 网 页 中 ， 加 入 JavaScript、VBScript 这 样 的 脚本 
WA, UK Java 小 程序 来 接收 用 户 的 信息 ， 并 给 出 具体 的 响应 。 比 如 说 ， 当 用 户 把 鼠标 放 
到 网 页 的 某 个 地 方 时 ， 网 页 中 将 给 出 友好 的 动画 文本 提示 。 这 种 效果 大 大 区 别 于 以 前 的 静态 
网 页 ， 具 有 了 人 性 化 的 交互 功能 。 但 是 组 织 制作 这 么 一 个 Web 页 面 是 需要 付出 更 多 的 创意 
和 程序 编写 工作 的 ， 必 须 掌握 Java, JavaScript 这 样 的 编程 语言 ， 这 种 要 求 使 得 许多 Web 动 
男 设计 者 望而却步 。 即 使 能 够 熟练 地 使 用 这 些 语言 ， 为 了 获得 类 似 的 效果 将 要 耗费 大 量 的 时 
间 和 精力 ， 使 Web 网 页 的 制作 周期 大 大 加 长 了 。 解 决 的 方案 一 般 都 是 从 网 上 查找 相应 的 
JavaScript 脚本 ， 直 接 引 用 骨 入 即 可 。 

(4) Flash 动画 

Flash 是 制作 网 络 交 互动 画 的 优秀 工具 ， 它 能 让 网 页 的 动画 制作 变 得 轻松 简单 ， 并 且 文 
持 动 画 、 声 音 以 及 交互 ， 具 有 强大 的 多 媒体 编辑 功能 ， 可 以 直接 生成 主页 代码 。 基 于 矢量 图 
形 的 Flash 动画 在 尺寸 上 可 以 随意 调整 缩放 ， 而 不 会 影响 图 形 文件 的 大 小 和 质量 ， 线 性 流 媒 
体 技术 允许 用 户 在 动画 文件 全 部 下 载 完 之 前 播放 已 下 载 的 部 分 ， 从 而 在 不 知 不 觉 中 下 载 完 剩 
余 的 动画 ; Flash 提供 的 透明 技术 和 物体 变形 技术 ， 使 复杂 动画 的 创建 更 容易 ， 给 网 页 动画 
的 设计 者 的 丰富 想象 提供 了 实现 的 窗口 。 交 互 设计 可 以 让 设计 者 随心 所 欲 地 控制 动画 ， 并 赋 
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予 用 户 更 多 的 主动 权 。Flash 还 具有 导出 独立 运行 程序 的 能 力 ， 其 优化 下 载 的 配置 功能 更 令 


人 为 之 赞叹 。 可 以 说 ，Flash 为 制作 适合 网 络 传输 的 网 页 动画 开辟 了 新 的 道路 。 


5.2 脚本 动画 的 家 入 


网 站 在 开发 设计 的 时 候 ， 如 果 在 网 页 中 舱 入 一 些 常 用 的 JavaScript 动画 ， 可 以 起 到 吸引 
人 的 效果 。 学 习 JavaScript 其 实 并 不 难 ， 只 要 掌握 了 基础 的 概念 和 使 用 方法 ， 就 可 以 将 一 些 


常用 的 JavaScript 脚本 应 用 到 自己 的 网 页 中 去 。 在 本 小 节 中 ， 我 们 首 儿 
JavaScript 的 基础 知识 和 使 用 方法 ， 然 后 将 一 些 常用 的 特效 应 用 到 实例 中 。 


521 KHERA KIZ E 


CL 


起 来 了 解 一 下 


JavaScript 是 一 种 基于 对 象 的 脚本 语言 ， 使 用 它 可 以 开发 Internet 客户 端的 应 用 程序 。 


JavaScript 在 HTML 页 面 中 以 语句 形式 出 现 ， 并 且 可 以 执行 相应 的 操作 。JavaScript 脚本 是 


一 种 能 够 完成 蘑 些 特殊 功能 的 小 程序 段 ， 这 些小 的 程序 段 并 不 是 像 一 般 程序 那样 被 编译 ， 而 


是 在 程序 运行 过 程 中 被 逐 行 地 解释 。 在 脚本 中 所 使 用 的 命令 与 语句 集 称 为 脚本 语言 ， 它 的 命 
令 和 函数 ， 可 以 同 其 他 的 正文 和 HTML. 标识 符 一 同 放置 在 用 户 的 网 站 网 页 中 。 当 用 户 的 浏 


览 器 检索 网 页 时 ， 将 运行 这 些 程序 并 实现 相应 的 动画 效果 。 


下 面 从 实例 的 角度 ， 来 看 一 看 最 简单 的 JavaScript 代码 的 结构 组 成 ， 如 下 所 示 : 


<html> 
<head> 
<Script Language ="JavaScript"> 
var helloA="Hello,welcom to our website "; 
var helloB=" 你 好 ， 欢 迎 访问 我 们 的 企业 网 站 "; 
function helloworld(){ 
alert(helloA); 
alert(helloB); 
} 
</Script> 
</Head> 
<body onload=helloworld()> 
</body> 
</Html> 


将 其 发 布 后 的 效果 如 图 5-2 所 示 。 


Microsoft Internet Explorer 加 Microsoft Internet Explorer 


^ \ Hello, welcom to our website A 你 好 ,欢迎 访问 我 们 的 企业 网 站 


图 5-2 JavaScript 实例 
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从 上 面 的 程序 段 中 ， 可 以 看 到 HTML 语言 的 主体 部 分 是 包含 在 标签 <html> 和 </html> 之 


[RII], ifj JavaScript 语言 是 包含 在 标签 <Script Language ='"JavaScript"> 和 </Scripft> 之 间 的 。 


的 语句 ，var helloB-" 你 好 ， 欢 迎 访问 我 们 的 企业 网 站 "， 这 段 语 名 中， 我 们 把 “你 好 ， 欢 迎 
访问 我 们 的 企业 网 站 ”这 名 话 当 作 字 符 串 赋 给 变量 helloB， 这 以 后 ，helloB 就 代表 了 上 面 的 
整 句 话 


实例 里 面 出 现 了 关键 字 var， 这 个 关键 字 在 JavaScript 语言 中 是 定义 变量 用 的 。 如 上 国 


说 明 : 
这 里 要 注意 ，JavaScript 语句 的 结尾 都 是 以 “; ”来 进行 分 割 的 。 

Function 的 作用 就 是 定义 函数 ， 函 数 名 后 面 要 跟 ( )， 函 数 的 主体 写 在 人 之 间 。 
Alert0 是 JavaScript 的 一 个 内 置 函 数 ， 其 作用 是 弹出 信息 提示 窗口 。 

onload()& JavaScript 的 一 个 事件 ， 当 HTML 文件 被 载 入 时 ， 该 事件 就 触发 了 。onload 


一 个 作用 就 是 在 首次 载 入 一 个 文档 时 检测 Cookie 的 值 ， 并 用 一 个 变量 为 其 赋值 ， 使 它 可 以 
被 源 代码 使 用 。 


在 开发 的 实例 当中 ， 就 引用 到 了 很 多 关于 JavaScript 实现 的 动画 效果 ， 读 者 可 以 在 本 地 


架设 服务 器 后 ， 将 光盘 中 的 网 站 源 代码 先进 行 运行 ， 如 图 5-3 所 示 。 实 例 中 一 共有 3 个 动画 


H 


效果 ， 这 些 动画 分 别 是 : 


了 让 一 张 静 态 的 图 片 完全 “ 动 ” 起 来 。 在 5.3 节 我 们 将 具体 介绍 它 


TET JavaScript H 


3 e 
2 期 显示 


1 E 

Nu" À A JavaScript 实 
JÉ- ^ i 现 图 片 切换 

1 


ne: » NE "ATI" PSaren x 


SERR 


JADE WEN 


Banner 


Flash 动画 


加 四 


wu: 2733 — "e »* 


图 5-3 页 中 的 动画 应 用 


(1) Banner Flash 动画 
网 站 Logo 后 面 使 用 的 是 Flash 制作 的 一 个 swf 动画 文件 。 通 过 简单 的 代码 ， 也 就 实现 
的 实现 方法 。 
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(2) JavaScript 日 期 显示 
使 用 JavaScript 实现 打开 网 页 时 ， 随 着 日 期 的 改变 而 自动 改变 了 日 期 显示 效果 ， 并 且 
示 了 当日 是 星期 几 ， 这 样 的 一 个 时 间 变 化 动画 ， 能 让 浏览 网 站 的 人 感觉 到 网 站 设计 的 人 | 
化 ， 同 时 也 感觉 到 网 站 随时 都 有 人 在 维护 更 新 。 
(3) JavaScript 实现 图 片 切换 
“品牌 新 闻 ” 后 面 的 图 片 动画 ， 也 是 使 用 JavaScript 实现 自动 切换 的 功能 ， 在 单 击 1、 
2. 3. 4 几 个 文字 图 片 时 ， 能 自动 切换 过 渡 到 不 同 的 图 片 。 单 击 下 面 的 文字 ， 也 能 立即 切换 
到 相应 的 图 片 。 


HE & 


5.2.2 显示 日 期 的 动画 


上 面 简单 地 介绍 了 JavaScript 的 使 用 方法 ， 这 一 小 节 就 按照 实例 的 效果 ， 在 网 站 的 首页 
加 入 日 期 时 间 的 动画 ， 有 具体 的 操作 步骤 如 下 : 
1) 运行 Dreamweaver CS6 软件 ， 打 开 shop 站 点 文件 夹 ， 然 后 打开 top.php 页 面 ， 此 时 
的 页 面 如 图 5-4 所 示 。 


DW 2# S60 EEV MAD Fera) 格式 (0) ee) 站 点 (5) SOM Wbo Me Ov år wm. l-lo] x | 


font.ess article. js 


| cl J 


IAIK 


JADE-WEN 


图 $-4 打开 制作 好 的 top.php 


20 单 击 工具 栏 中 的 “ 拆 分 ”按钮 项 如 |， 切 换 到 代码 和 视图 的 编辑 状态 ， 如 图 5-5 
所 示 。 
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<tr>) 
<td widthz"204" height="54">ânbsp: td» 
<td widthz"562' nbsp: </td>) 
tr» 
etr» 
«td height-^24"»&nbsp; </td> 
«td»&nbsp:«a href=" index. php ) 首 au 
abênbsp; | <a hrefz"shownewpr. php ^ ROC f$) </a> 
| <a href=" showtuijian. php ORRE | <a 
href=" shovhot.php") 热 门 品 牌 </a>&nbsp; | &nbap: <a 
href=" showfenlei. php 产品 分 类 </a7&nbsp: 
&nbsp :<a hrefz"usercenter. php > 用 户 中 心 a 
&nbsp: | &ánbsp:;«a href="finddd.php" > 订单 查询 </a> 
&nbsp: | nbsp: Ca href=" gouwuche. php POPE </a> 
</td> 
Gt 
C/table»4td» 
Vti 
<tr) 
<td width=219" height="32"><iag src- 
"images/bannerleft.gif" widthz"219" height=" 144"> 
gto» 
<td width="547"><iag src= 
“images/bannerright. gif” vidth="547" height-^144^ 
td 
tr 
table» 


图 5-5 切换 到 代码 和 视图 的 状态 


3) 单 击 右 上 角 的 单元 格 ， 加 入 一 个 右 居 的 层 <div align="right"></div> (表示 在 该 地 方 
加 入 显示 的 时 间 ， 并 让 它 右 对 齐 显 示 )， 如 图 5-6 所 示 。 


0D 
<td widthz"204" height="54">&nbsp ; </td> 
<td width-"562"» ERZES 


5-6 设置 右 对 齐 的 层 


4) 在 <div align="right"></div> 中 间 ， 加 入 如 下 的 JavaScript 脚本 : 


«SCRIPT language="JavaScript"> 
IHKA JavaScript 脚本 


var enabled = 0; today = new Date(); 
varday; var date; 

/定义 var 值 为 当天 最 新 的 时 间 
if(today.getDay()—-0) day = "星期 日 " 
if(today.getDay()--1) day = "星期 一 " 
if(today.getDay()—-2) day = "星期 二 " 
if(today.getDay()-—3) day = "星期 三 " 
if(today.getDay()—-4) day = "星期 四 " 
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if(today.getDay()——5) day = "星期 五 " 

if(today.getDay()——6) day = "星期 六 " 
/从 系统 获得 时 间 ， 并 显示 星期 几 

document.fgColor = " A70977"; 


/设置 文字 颜色 
datel = "<font size=2 color-black»" + (today.getYear()) + "年 "+ (today.getMonthO + 1) + "月 "十 
today.getDate() + "日 "+"</font>"; 
date2 = "<font size-1 color-black2" + day + "</font>"; 


document. write("<left>" + datel.fontsize(3) + date2.fontsize(3) + "</left>"); 
/获取 年 、 月 . 显示 


</SCRIPT> 


上 面 的 这 段 程 序 其 实 很 简单 ， 基 本 大 意 可 以 随 英 文 进行 解释 。 代 人 码 在 运行 过 程 中 ， 
会 有 任何 的 提示 出 现 ， 这 是 因为 标识 符 “<! 一 ”和 标识 符 “ 一 >” 之 间 ， 可 以 在 一 些 不 支 
JavaScript 的 浏览 器 里 隐藏 JavaScript- 

5) 保存 后 输入 浏览 地 址 http:/127.0.0.1/shop/top.php， 即 可 在 IE 浏览 器 中 看 到 显示 的 日 
胃 ， 具 体 效果 如 图 5-7 所 示 。 


w 


PETI EI - 了 icrosoft Internet Explorer 
XF ABE SEV 收藏 和 ) IA) 帮助 00 
Q5£-O-i9i36|Pzt zee 所 | 23- aua 


地 址 0) El uo //121.0.0. 1/shop/top. php 


PD I 产品 分 类 : APPL 上 订单 查询 : 购物 车 


9.2.9. ”新闻 图 片 切换 动画 


在 “品牌 新 闻 ” 后 面 的 图 片 是 自动 切换 的 ， 单 击 相应 的 数字 图 片 能 打开 相应 指定 的 图 
片 ， 这 样 的 动画 也 是 通过 使 用 JavaScript 脚本 语言 加 以 实现 的 ， 制 作 的 步骤 如 下 : 

1) 在 站 点 images 文件 夹 里 ， 准 备 4 张 一 样 大 小 的 jpg 图 片 ， 并 分 别 命名 为 Oljpg. 
02.jpg、03.jpg 以 及 04.jpg， 所 有 图 片 都 要 在 Photoshop 软件 中 进行 统一 的 处 理 ， 以 保证 图 片 
的 大 小 和 格式 都 一 样 ， 准 备 的 4 张 图 片 如 图 5-8 所 示 。 
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“CC:\Apache\htdocs\shop\inages 
XO) d Ac) EEV 收藏 人) IRT) 帮助 00 
-B Ps OXR |T 


Bl c- psche\htdocs\shop\inages 


\ 图 片 任务 


g 作为 幻灯 片 查 看 


O 联机 订购 照片 [二 
ih DESAIN 


bannertop. gif 


图 5-8 准备 的 4 张 图 片 
2) 在 Dreamweaver CS6 软件 中 打开 index.php 页 面 ， 在 第 1 张 图 片 的 位 置 加 入 如 下 的 


代码 : 


面 ， 


«DIV id=oTransContainer 

style="FILTER: progid:DXImageTransform.Microsoft. Wipe(GradientSize-1.0,wipeStyle-0, motion= 
"forward); WIDTH:214px; HEIGHT: 128px"> 

<IMG  src-"images/0l.pg" | name-"oDIVI" width=214 height=128 border=0 id=0oDIV1 
style="DISPLAY: yes;"> 

«IMG id=oDIV2 style="DISPLAY: none;"height-128 src="images/02.jpg" width=214 border=0> 

<IMG id=oDIV3 style="DISPLAY: none;" height=128 src="images/03.jpg" width=214 border=0> 

«IMG id=oDIV4  style-"DISPLAY: none;" height-128 src="images/04.jpg" width=214 border=0> 
</DIV> 


说 明 : 
这 上段 程序 的 意思 是 ， 将 images 文件 夹 下 面 的 4 张 图 片 以 <DIV> 层 的 形式 放置 到 页 面 里 
并 分 别 定义 层 的 名 称 。 定 义 层 的 名 称 ， 是 为 了 方便 JavaScript 脚本 语言 的 调用 。 设 置 


Oljpg 这 张 图 片 ， 在 默认 状态 下 为 可 见 。 


3) 在 插入 图 片 的 表格 外 面 ， 加 入 JavaScript 的 控制 语言 ， 有 具体 设置 如 图 5-9 所 示 。 


<script>var MaxImg = 4; fnToggle();«/script^ 
/这 段 程序 的 意思 是 ， 定 义 显 示 图 片 的 数量 为 4。 


4) 由 于 其 体 实 现 的 JavaScript 脚本 语言 太 长 ， 所 以 将 其 单独 写 了 一 段 程 序 ， 并 保存 在 


站 点 style 文件 夹 的 Articles 文件 中 ， 有 具体 操作 如 图 5-10 所 示 。 
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(td rowspan="2"><iag src-"images/newsright.gif" width-"20" height-"144" alt=" > Ytd 
t 
<tr> 
<td)<iag srcz^images/newsbottom.gif' width= 214”height= 16”alt=“><c/td> 
tr» 
C/table»Utd» 
tr 
Gr» 
<td aligns^right? valign="top” styles"padding-right:lÜpx:"» 


Ovar N 


<TABLE width=110 
border=0 align="right” cellPadding=0 cellSpacing=0> 
<TBODY> 
<TR> 
<TD width=26><A hrefz"javascript:toggleTo(1)"»4IMG height=15 
src-^iaages/s l.gif^ width=17 


border=0></A></TD> 
<TD widths26><A href=" javascript:toggleTo(2)"»XIMG height=15 
srcs^images/s 2.gif" widthelT 
border=0></A></TD> 
<TD width=26><A href-"javascript:toggleTo 3)  ^4ING height=15 
src=" iaages/s_3. gif” width=17 
border=0> </A> </TD> 
<TD width=27><A href=" javascript:toggleTo(4)"><ING height=15 
src=" images/s_4. gif" width=17 finddd php 
border=0></A>4/TD> i tiii pie 
TO 
«/TBODY» F fenction php 
X/ TABLE» td - gengguo. php 
- genggsolist php 


图 5-9 ”加 入 控制 图 片 的 数量 值 


var bStart = 0; 
var bStop "0; 


function fnToggle() 
t 


var next = Novimg + 1; 


if(next == MaxImg+1) 
t 
Nowlmg = MaxlImg:; 
next = 1; 


) 
if(bStop'*1) 
{ 


if(bStart == 0) 

t 
bStart = 1; 
setTimeout('fnToggle()', 3000); 
return: 


} 
else 
t 


oTransContainer.filters[0].Apply():; 


document.images['oDIV'*next].style.display = ""; 
document,images['oDIV'4NowImg].style.display = "none"; 


上 LICENSE txt 
Là renes js 
E vdeeorache php 
-E reh 


图 5-10 脚本 语言 保存 的 文件 


/ 
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具体 的 程序 内 容 如 下 : 


var NowImg = 1; 
var bStart = 0; 
var bStop =0; 
/定义 三 个 变量 的 初始 值 
function fnToggle() 


1 
var next = NowImg + 1; 
if(next == MaxImg+1) 
{ 
NowImg = MaxImg; 
next — 1; 
j 
if(bStop!-1) 
1 
if(bStart == 0) 
1 
bStart = 1; 
setTimeout('fnToggle()', 3000); 
return; } 
else 
1 
oTransContainer.filters[0]. Apply(); 
document.images['oDIV"-next].style.display = ""; 
document.images['oDIV'*NowImg].style.display = "none"; 
oTransContainer.filters[0].Play(duration-2); 
if(NowImg == MaxImg) 
NowlImg = l; 
else 
Nowlmg++; 
j 
setTimeout('fnToggle()', 3000); 
j 
j 
function toggleTo(img) 
1 
bStop-1; 
ifimg--1) 
1 
document.images['oDIV1'].style.display = ""; 
document.images['oDIV2'].style.display = "none"; 
document.images['oDIV3'].style.display — "none"; 
document.images['oDIVA4'].style.display = "none"; 
j 


else if(img--2) 


1 
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document.images['oDIV2'].style.display = ""; 
document.images['oDIV1'].style.display = "none"; 
document.images['oDIV3'].style.display — "none"; 
document.images['oDIVA4'].style.display = "none"; 

j 

else if(img==3) 

{ 
document.images['oDIV3'].style.display = ""; 
document.images['oDIV1'].style.display = "none"; 
document.images['oDIV2'].style.display — "none"; 
document.images['oDIVA4'].style.display = "none"; 

j 

else if(img—-4) 

{ 
document.images['oDIV4'].style.display = ""; 
document.images['oDIV1'].style.display = "none"; 
document.images['oDIV2'].style.display — "none"; 
document.images['oDIV3'].style.display — "none"; 

j 


j 


50 那么 这 段 程序 要 如 何 调 入 到 网 页 中 并 进行 应 用 呢 ? 方 法 很 简单 ， 上 只 要 在 top.php 页 
面 中 <head> 和 </head> 之 间 加 入 图 5-11 所 示 的 链接 代码 <SCRIPT src-"style/article.js" 
</SCRIPT> 即 可 。 


<head> 

(neta http-equiv="Content-Iype" content="text/htal: charset=gb2312"> 
Cited Et TM title 

<link rel="stylesheet” type="text/css" href-'css/font.css? 


dy> 
<table width="766° border="0" align="center” cellpadding="0" cellspacing-" 0"> 
<tr) 
<td height="81" colspanz'2" valigne"bottoa" background-"images/bammertop.gif'»(table vidth= 766” height="78" 
border=" 0”cellzpacings “0”cellpaddings 0 > 
er» 


(td width="204" heightz"54" »&nbsp : </td> 
<td vidth-562"» <div align="right”) 
<SCRIPT languages JavaScript? 
41--——— —— — 
war ensbled = 0. today = new Date() . 
var day; var date; 
if (today. getDsy () 220) day = "i 
if (today. getDay ()==1) 2 
if (today. getDay ()--2) 
if (today. getDay()==3) 
if (today. getDay ()==4) 
if (today. getDay ()==5) 
if (today. getDay ()==6) 
docent. feColor = “ATNATT” 


ERREGER 


图 5-11 加 入 链接 代码 
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6) 最 后 还 要 用 鼠标 分 别 选 择 数 字 图 片 1、2、3、4， 加 入 不 同 的 脚本 ， 用 于 控制 单 击 时 
所 指向 的 不 同 图 片 命令 。 如 在 图 片 1 上 加 入 的 代码 为 javascript:toggleTo(1),“ 属 性 ”面板 设 


置 如 图 5-12 所 示 。 


inages/s, 1. gif GO An 


[1] E, ik o Wü) 
m| 


RL) 
地 图 0 目标 (8) 
A OOV 原始 


7) 执行 菜单 栏 “ 文 人 
图 片 切换 的 效果 ， 效 果 如 图 5-13 所 示 。 


Fscript:toggleTe(1)] SG RE Go 


Y 


图 5-13 图 


{v 


9o 


图 5-12 ”加 入 链接 的 属性 


DBE 


5.3 ZEBRAS Hash 动画 


Flash 是 现在 制作 网 站 动画 必 不 可 少 的 一 个 软 伯 
专业 的 网 站 建设 者 ， 只 要 能 使 月 


H 


简单 的 介绍 ， 然 后 使 


日 它 制作 一 些 最 简单 


这 个 软件 制作 实例 


5.3.1 动画 大 师 软件 Fash 


Flash CS6 是 迄今 为 止 Adobe 4y 7) $A 


EF” 一 “保存 ”命令 后 ， 输 入 地 址 http://127.0.0.1/shop/， 即 可 看 到 


对 于 建立 网 站 的 读者 来 说 ， 如 果 不 是 
的 动画 效果 即 可 。 本 节 将 对 Flash 做 一 个 
PÉJ Banner 动画 。 


化 ， 而 且 更 加 美观 实 


J> Ed jt Flash CS6 后 ， 


其 界面 如 图 5-14 所 示 。 


Flash CS6 ^^ JE 


CD 主 菜单 


Flash CS6 工作 环境 顶部 显示 的 是 包 
用 功能 。 主 菜单 包括 “ 文 伯 
若干 菜单 项 和 子 菜单 ， 几 乎 所 有 的 Flash 功能 都 可 以 从 主 菜 单 中 
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WEARERS, PEKARNE 


DAA 
含 命令 


其 界面 较 以 前 版 本 有 了 较 大 的 变 


下 几 个 常用 的 工具 栏 。 


的 主 菜单 ， 主 菜单 用 于 控制 Flash CS6 的 常 


上 9 “编辑 ” “命令 ” * DU 和 “帮助 ” 荣昌 


fi ， 每 一 个 荣 单 又 包括 
FP 找到 其 对 应 的 选项 。 
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fce 


打开 最 近 的 项 目 -= aga 9 ^5egixt» 


D ironian 可 actionScrgh 30 kj w*aR xe» 
ELI "^ denso 30 o Ü Ade Tv 
mJ 

fos 扩展 

D un dtl Pn Eschwege > 


CE II CS xXOSISNNMEZHe[ ner 


[Fl xt «o eec) woo) Wboo an -oz 


nre B AR tor aroa J 1 EBEN XAG x 
" AR tor OS j5mszr» 

LE 2 à £x om 

mssns b LUCI O 5 AetienSeri > 

es "Actionscript xit 9 7 eese p me meza 


d rean 73. BB. QBER. RE Adobe 
g Fran- BAr 2013. 

ARAG» W mo £t 6bzvntsseemtim 
= MarPrSTRAr. 


图 5-14 Flash CS6 主 界 面 


(2) 主 工 具 栏 


主 菜单 栏 正 下 方 是 主 工 具 栏 。 主 工具 栏 包 含 了 Flash CS6 的 一 些 常用 命令 的 快捷 按钮 ， 


包括 “新 建 ” “打开 ” “ 转 到 Bridge" “保存 ” «3] 印 » “前 切 ” “复制 ” “粘贴 ” “撤销 ” “ 重 做 ” 
“ 贴 紧 至 对 象 ”“ 平 请 ”“ 拉 直 ”“ 旋 转 与 倾斜 ”“ 缩 放 ” 和 “对 齐 ” 等 按钮 。Flash CS6 中 的 


主 工具 栏 如 图 5-15 所 示 ， 它 显示 了 操作 的 基本 功能 。 


新 打转 保 打 "Np X —HoHR E o no 平 d dE Mx 
建 开 到 存 印 切 dw 贴 消 做 E H 直 转 放 3r 
E 对 tá 
$ $ 8 


图 5-15 工具 栏 基本 功能 


说 明 : 


如 果 读 者 的 Flash CS6 界面 中 没有 显示 工具 栏 ， 那 是 由 于 没有 打开 它 ， 选 择 菜单 栏 中 的 


“窗口 ” T ET ppe» X “ 主 工具 栏 ” 命令 即 可 打开 。 
(3) 编辑 栏 
主 工具 栏 正 下 方 是 编辑 栏 。 编 辑 栏 包含 了 用 于 编辑 场景 和 元 件 


以 及 月 


HFEA] 


LEHE 


的 缩放 比率 的 控件 和 信息 。 要 在 屏幕 上 查看 整个 舞台 ， 或 者 要 在 高 缩放 比率 情况 下 查看 绘画 
的 特定 区 域 ， 可 以 更 改 缩放 比率 。 当 发 布 包含 多 个 场景 的 Flash 文档 时 ， 文 档 中 的 场景 ， 将 


按照 它们 在 “场景 ”面板 中 列 出 的 顺序 进行 回放 ， 如 图 5-16 Pro. 


éar 也 外 WE v 


图 5-16 ”编辑 栏 


C4) 时 间 轴 


时 间 轴 包含 两 个 基本 的 元 素 ， 即 层 和 帧 。 时 间 轴 起 着 组 织 和 控制 动画 内 各 元 素 的 作 
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用 ， 使 用 图 层 ， 可 以 设 定 动 画 在 排列 上 的 前 后 顺序 ， 而 使 用 帧 ， 可 以 设 定 动 画 在 时 间 上 出 现 
的 前 后 顺序 。Flash 动画 是 按照 帧 的 顺序 ， 逐 帧 播放 而 形成 的 动态 效果 。 时 间 轴 显示 的 是 动 
画 中 各 帧 的 排列 顺序 ， 即 是 创 者 作 设计 的 动画 “演员 ”出 场 的 先后 顺序 。 时 间 轴 分 为 两 个 区 
域 ， 即 层 操 作 区 和 帧 操作 区 ， 它 的 操作 界面 如 图 5-17 所 示 。 


MAOR 120 24 


图 5-17 Flash CS6 的 时 间 轴 
(5) 工具 箱 


工具 箱 如 图 5-18 所 示 。 工 具 箱 中 的 工具 使 用 户 可 以 绘制 、 涂 ERE 
色 、 选 择 和 修改 插图 ， 还 可 以 更 改 舞 台 的 视图 ， 工 具 箱 主要 分 为 以 Na se 
下 4 个 区 域 TNEI HY 

nda P " 20422 

“工具 ”区 域 ， 包含 绘画 、 涂 色 和 选择 等 设计 工具 。 GA 

“查看 ”区 域 ， 包含 在 应 用 程序 窗口 内 进行 缩放 和 移动 的 工具 。 mE 

“颜色 ”区 域 ， 包含 用 于 笔触 颜色 和 填充 颜色 的 功能 键 。 m-s ~( 

“选项 ”区 域 ， 显 示 选 定 工具 的 组 合 键 ， 这 些 组 合 键 会 影响 工具 ”一 一 一 一 一 一 一 
的 涂 色 或 编辑 操作 。 图 5-18 Flash CS6 的 

(6) 工作 舞台 工具 箱 


时 间 轴 下 方 是 工作 舞台 ， 如 图 5-19 AR. TERS EHTE RE AAEE KE, 
这 些 图 形 内 容 包 括 矢 量 插图 、 文 本 框 、 按 钮 、 导 入 的 位 图 图 形 或 视频 剪辑 等 。Flash 工作 环 
卉 中 的 舞台 相当 于 在 Flash Player 中 回放 Flash 文档 的 矩形 空间 。 用 户 可 以 在 工作 时 放大 或 
缩小 舞台 的 视图 。 当 放大 了 舞台 时 ， 用 户 可 能 无 法 看 到 整个 舞台 。“ 手 形 ”工具 鸭 可 以 移动 
舞台 ， 因 此 不 必 更 改 缩放 比率 即 可 更 改 视图 。 


FL xo) dono Dv MOD £o EM $0) RA JXo woo Whoo ni. D FXCINEN 


tB Lv OS NOS GANE HeD A «m 


图 $-19 工作 舞台 
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(7) 属性 面板 

工作 舞台 右 方 是 “属性 ”面板 ， 如 图 5-20 所 示 。 使 用 
“属性 ”面板 ， 可 以 很 容易 地 获取 舞台 或 时 间 轴 上 当前 选 定 对 
象 的 最 常用 属性 ， 从 而 简化 了 文档 的 创建 过 程 。 可 以 在 “ 属 
性 ”面板 中 ， 更 改 对 象 或 文档 的 属性 ， 而 不 用 访问 包含 这 些 
功能 的 菜单 或 面板 。 

“属性 ”面板 可 以 显示 当前 文档 、 文 本 、 元 件 、 形 状 、 位 
图 、 视 频 、 组 、 帧 或 工具 的 信息 和 设置 ， 有 具体 取决 于 当前 选 
定 的 内 容 。 当 选 定 了 两 个 或 多 个 不 同类 型 的 对 象 时 ,“ 属 4 
面板 会 显示 选 定 对 象 的 数量 。 -— 

(8) 开发 常用 面板 eu 

Flash CS6 工作 环境 ， 还 向 用 户 提供 了 一 系列 的 面板 。Flash 中 的 面板 有 助 于 用 户 查 看 、 
组 织 和 更 改 文档 中 的 元 素 。 面 板 中 的 可 用 选项 控制 着 元 件 、 实 例 、 颜 色 、 类 型 、 帧 和 其 他 元 
素 的 特征 。 面 板 使 用 户 可 以 处 理 对 象 、 颜 色 、 文 本 、 实 例 、 帧 、 场 景 和 整个 文档。 例如 ， 可 
以 使 用 “颜色 ”面板 创建 颜色 ， 使 用 “对 齐 ” 面 板 来 将 对 象 彼此 对 齐 或 与 舞台 对 齐 。 大 多 数 
面板 都 包含 一 个 带 有 附加 选项 的 弹出 菜单 。 要 查看 Flash 中 可 用 面板 的 完整 列表 ， 可 查看 菜 
单 栏 中 的 “窗口 ”菜单 项 。 

这 里 介绍 最 常用 的 “动作 ”面板 和 “ 库 ” 面 板 。 

Flash 功能 的 强大 在 于 它 的 Action. 〈 动 作 )， 这 是 动画 和 脚本 的 结合 。 在 Flash CS6 F, 
所 有 的 ActionScript 都 是 在 图 5-21 所 示 的 Action 栏 中 进行 编辑 的 。 对 于 动态 网 页 的 开发 应 
用 而 言 ， 这 个 “动作 ”面板 的 使 用 频率 是 最 高 的 。 


» 


=r 


ball 


图 5-21 “动作 ”脚本 面板 


“ 库 ” 面 板 里 面 有 用 户 所 有 的 动画 元 件 ， 包 括 声音 、 图 片 、 按 钮 元 件 。 当 要 使 用 时 ， 只 
需 按 下 〈Ctrl+L》 组 合 键 ， 就 可 以 打开 “ 库 ” 面 板 ， 如 图 5-22 所 示 。 
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库 | Tm 
[ banner.fla iv] x) G8 


Kl 5-22 “E” mit 


5.9.2 ”制作 导航 Banner 动画 


前 面 学 习 了 Flash CS6 的 基本 操作 ， 读 者 都 对 Flash CS6 有 了 一 个 大 概 的 认识 。 本 小 节 
将 介绍 如 何 使 用 Flash CS6 制作 一 个 内 亮 的 Banner 动画 。 为 了 保证 网 页 的 整体 效果 ， 通 常 
是 将 需要 突出 的 部 分 制作 成 动画 效果 ， 如 本 实例 就 可 以 将 说 明文 字 “ 千 ”制作 成 动画 ， 在 设 
计 的 过 程 中 已 经 考虑 好 使 用 Flash 制作 一 个 简单 的 特效 ， 让 本 来 静止 的 Banner 更 具有 动 
感 ， 效 果 如 图 5-23 所 示 。 


文件 下) WB) EAC nio) 


出 无 限 激情 和 力量 ， 
L EET: 
的 绝 佳 篇 章 。 惊 喜与 感 
人 扒手 步 入 神圣 的 婚姻 


2 
4 
A 
的 
L 
证 
下 


图 5-23 ”制作 的 Flash 动画 效果 


具体 的 制作 步骤 如 下 : 

1) 运行 Flash CS6 软件 ， 选 择 菜单 栏 上 的 “文件 ”一 “新 建 ” 命 令 ， 打 开 “ 新 建文 
档 ” 对 话 框 。 单 击 选择 “类 型 ” 列 选 框 中 的 “Flash 文档 (ActionScript 2.0)” 选 项 ， 然 后 单 
击 “ 确 定 ” 按 钮 ， 即 新 建 了 一 个 空 的 Flash 文档 。 以 banner 背景 图 片 切片 后 的 大 小 为 标准 ， 
单 击 “ 属 性 检查 器 ”面板 中 的 “大 小 ”后 面 的 “编辑 ”按钮 ， 打 开 “ 文 档 属性 ”对 话 框 ， 在 
文本 框 中 输入 “ 宽 (W)” 为 547,“ 高 OD" A 144,“ 背 景 颜色 ”为 黑色 ,“ 帧 频 C(F)” 为 
24.00， 其 他 保持 默认 设置 ， 具体 的 “文件 属性 ”设置 如 图 5-24 所 示 。 


156 


第 5 章 ， 电 子 商务 网 站 的 动画 ] 


图 5-24 设置 文档 属性 
2) 单 击 “ 确 定 ” 按 钮 ， 即 创建 了 一 个 Flash 文档 。 选 择 菜单 栏 上 的 “文件 ”一 “ 保 
存 ” 命 令 ， 打开“ 男 存 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 “banner”， 将 文件 保存 为 
banner.fla( 图 5-25)。 这 样 先 保存 的 目的 是 为 了 方便 后 面 的 操作 ， 防 止 文 件 的 丢失 。 


图 5-25 保存 文件 


3) 下 面 开 始 动画 的 背景 导入 操作 ， 双 击 时 间 轴 上 的 “图 层 1”， 将 其 命 Bx, 
如 图 5-26 所 示 。 


图 5-26 更 改 图 层 名 称 


4) 选择 荣 单 栏 “ 文 件 ” 一 “导入 ”一 “导入 到 舞台 ”命令 ， 打 开 “ 导 入 ”对 话 框 ， 选 
择 images 文件 夹 下 的 bannerright.gif 图 片 ， 如 图 5-27 所 示 。 
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bannerdi. gif bannerleft. gif 


图 5-27 选择 要 导入 的 背景 图 片 


5) 单 击 “打开 ”按钮 ， 则 图 片 导入 到 了 Flash 舞台 上 。 单 击 工具 箱 中 的 “选择 工具 ” 


按钮 所 ， 选 择 导入 的 图 片 ， 在 “属性 ”面板 中 


， 设 置 图 片 的 “ 宽 ” 和 “高 ”的 位 置 分 别 为 


X: 0.00 和 Y: 0.00， 设 置 如 图 5-28 所 示 。 通 过 这 样 的 设置 可 以 让 图 片 和 场景 完全 重 车 。 


图 5-28 设置 


图 片 的 位 置 


6) 设置 后 的 舞台 效果 如 图 5-29 所 示 。 
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图 5-29 设置 图 片 的 位 置 后 的 舞台 效果 
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7) 单 击 时 间 轴 上 的 “新 建 图 层 ”按钮 到 ， 新 建 一 个 图 层 ， 并 命名 为 “星星 ” 接 下 来 
制作 “星星 ”的 影片 剪辑 moveball， 选 择 菜 单 栏 “ 插 入 ”一 “新 建 元 件 ” 命 令 ， 或 者 按 下 
《Ctrl+F8》 组合 键 ， 在 打开 的 “创建 新 元 件 ” 对 话 框 中 ， 输 入 “名 称 ” 为 moveball， 单 击 选 
择 “类 型 ”下 拉 列 选 菜单 中 的 “影片 剪辑 ”选项 ， 共 体 设 置 如 图 5-30 所 示 。 


ZSBR(N): | movebal 


类 型 (T); EAE IY 


XR: ERER 
高 级 


图 $-30 ”创建 新 影片 剪辑 元 件 


8) 单 击 “ 确 定 ” 按 钮 ， 进 入 moveball 影片 剪辑 文档 编辑 窗口 ， 单 击 工具 箱 中 的 “多 角 
EETA” RAMO, KE GARAE” ALAE, AKERE ARHAR 5-31 所 
示 的 星 形 。 
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图 5-31 绘制 白色 星 形 的 效果 


9) 单 击 工具 箱 中 的 “选择 工具 ”按钮 图 ， 选 择 绘 TREE 
制 的 白色 星 形 ， 在 “属性 ”面板 中 设置 “ 宽 ” 为 «i 
85.35, "i" 74 8$.3$， 有 具体 设置 如 网 5-32 所 示 。 了 

100 选择 菜单 栏 上 的 “搬入 ”一 “新 建 元 件 ” 命 5e — vm o 
令 ， 或 者 按 〈Ctrl+F8》 组 合 键 ， 在 打开 的 “创建 新 元 ”LA 
件 ”对 话 框 中 ,输入 “名 称 ” 为 mball， 单 击 选择 “类 a 
型 ”下 拉 列 选 菜单 中 的 “影片 剪辑 ”选项 ， 有 具体 设置 如 2ER 
图 5-33 所 示 。 | mL JERR 

图 5-32 ”设置 白色 星 形 的 属性 
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AS RN): | mball 


类 型 (T): | EAES |v 


XR: 库 根 目录 
高 级 > 


图 5-33 创建 新 的 影片 剪辑 


11) 单 击 “确定 ”按钮 ， 进 入 mball 影片 剪辑 文档 编辑 窗口 ， 在 第 13. 23. 35 帧 分 别 
J& Fr (F6) 插入 关键 帧 ， 接 着 ， 在 “图 层 1” 的 任意 两 个 关键 帧 之 间 ， 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “创建 传统 补 间 ”命令 ， 操 作 如 图 5-34 所 示 。 


Fl xh» db RDM MA Pena XEM €) 控制 (0) MM Som 帮助 00 te- [P j]l-iel x T 


$.19 NN £O S NOS eNNE/28e 062 v 


图 5-34 ”创建 补 间 动 画 


120 选择 荣 单 栏 “ 插 入 ”一 “新 建 元 件 ” 命 令 ， 或 者 按 下 (CubFS 组 合 键 ， 创 建 影 
片 剪 辑 ball， 在 场景 中 建立 两 个 图 层 。 其 中 “图 层 1” 是 将 ball 动画 影片 剪辑 拖 入 到 文档 窗 
中 ， 再 建立 一 个 从 下 往 上 的 动画 效果 。 在 “图 层 2” 上 的 第 21 iw, F (FO 快捷 键 建 
立 一 个 关键 帧 ， 如 图 5-35 Hr. 


DS 


gag paot Rop 127: 


Kl 5-35 创建 ball 动画 
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13) 按 下 《〈F9》 快捷 键 打开 “动作 - 帧 ”面板 ， 输 入 如 下 的 命令 ; 


this.removeMovieClip(); 


/表示 清除 所 有 的 影片 剪辑 
如 图 5-36 所 示 。 


ActionScript 1.0 & 2.0 — | 
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图 5-36 输入 清除 影片 命令 


14) 单 击 国 BB 把 和 器 到 主场 景 中 ， 从 “ 库 ” 面 板 中 ， 将 制作 的 ball 星 形 影 片 剪辑 并 拖 放 
到 “星星 ”所 在 图 层 上 的 第 1 帧 ， 在 “属性 ”面板 中 定义 它 的 “实例 ”名 称 为 bal， 具 体 设 
置 如 图 5-37 所 示 ， 即 完成 了 该 图 层 的 制作 。 


图 5-37 ”定义 ball 实例 名 称 


15) 最 后 建立 “action” 层 ， 加 入 Flash 命令 ， 实 现 Flash 中 的 星 形 能 够 朝 四 面 八方 飞 射 
的 效果 。 单 击 时 间 轴 上 的 “新 建 图 层 ” 按 钮 团 ， 新 建 一 个 图 层 ， 并 命名 为 action, WE 5-38 
所 示 。 
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ITTITI 
L | [| 


图 5-38 Æ “action” KJE 


16) 选择 荣 单 栏 “ 窗 口 ”一 “动作 ”命令 ， 或 者 按 下 C9 DUEB y 


面板 ， 然 后 输入 如 下 的 命令 : 


 root.ball. visible = 0; 
. root, ball.onEnterFrame-function () { 
for (var j = 0; j«8; j++) { 
mc = this.duplicateMovieClip("ball"-+, 1); 
mc._rotation = j*40; 
mc. alpha = random(30)+30; 
mc. xscale = mc. yscale-random(30)4-50; 


i++; 


如 图 5-39 所 示 。 


.root.ball. visible = 0; 
.root, ball.onEnterFrame-function O { 
for (var 3 = 0: j<8: j+) I 
mc = this.duplicateMovieClip(^ball'i, 
mc. rotation = je«40: 
mc. slpha = randon(30)*30. 
AC. xscale = mc. yscale-randon(30)450: 


iet. 


Xr 
* 


图 5-39 ”建立 action 图 层 并 加 入 命令 


周 出 “动作 - 帧 ” 


17) 到 这 里 ， 动 画 效 果 就 制作 完成 了 。 选 择 菜单 栏 上 的 “文件 ”一 “发 布设 置 ” 命 
令 ， 设 置 如 图 5-40 所 示 。 发 布 后 ， 即 在 制作 的 文件 夹 下 面 生成 一 个 bannerswf 文件 ， 双 击 


该 文件 可 以 单独 打开 并 显示 动画 效果 。 


162 


zi] 


第 5 章 ”电子 商务 网 站 的 动画 


图 5-40 ”发布 设置 


180 最 后 ， 还 需要 将 发 布 的 bannerswf 文件 巷 入 到 网 页 中 ， 有 具体 方法 就 是 ， 打 开 
Dreamweaver CS6， 进 入 站 点 文件 夹 中 的 top.php 页 面 ， 将 原来 网 页 的 banner 图 片 删 除 ， 单 
击 选 择 需 要 典 入 Flash 文档 的 地 方 ， 执 行 菜单 栏 “ 插 入 ”一 “媒体 ”一 “SWF” 命 令 ， 如 图 
5-41 所 示 。 
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19) 打开 “选择 SWF” 对 话 杠 ， 选 择 发 布 的 banner.swf 文档 ， 如 图 5-42 所 示 。 


XHB: 
xmas): 


本 
相对 于 : top. php 
在 站 点 定义 中 更 改 默认 的 链接 相对 于 


图 5-42 AFERRA 


200 单 击 “ 确 定 ” 按 钮 ， 即 可 在 Dreamweaver 软件 中 插入 一 个 Flash 动画 ， 如 图 5-43 
所 示 。 


图 5-43 WX Flash 的 效果 


最 后 ， 保 存 首 页 的 嵌入 操作 ， 即 可 在 TE 浏览 器 中 浏览 制作 的 所 有 动画 效果 。 实 例 使 用 
的 Flash 技术 还 是 相对 比较 简单 的 ， 读 者 在 实际 应 用 的 时 候 可 以 在 网 上 搜索 更 多 的 Flash 动 
画 源 码 ， 不 需要 更 多 的 程序 变更 ， 进 行 简 单 的 应 用 即 可 。 
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在 制作 一 个 PHP 电子 商城 系统 时 ， 提 前 规划 网 站 的 架构 是 一 件 很 重要 的 事情 。 在 我 们 
的 脑子 里 这 个 网 站 要 有 一 个 雏形 ， 例 如 网 站 大 概 有 哪些 页 面 、 页 面 间 的 关系 如 何等 。 数 据 库 
的 架构 规划 也 是 一 样 的， 需要 提前 考虑 该 数据 库 要 有 哪些 数据 表 、 字 段 ， 如 何 跟 网 页 配合 
等 。 本 章 是 电子 商城 动态 功能 开发 的 开始 ， 首 先 分 析 电 子 商城 的 动态 功能 有 哪些 ， 然 后 进行 
电子 商城 数据 库 的 设计 ， 最 后 实现 首页 上 的 动态 功能 开发 。 


本 章 重 点 介绍 如 下 知识 : 


E 网 站 模版 功能 特点 分 析 
它 电子 商城 数据 库 设计 
C; 首页 动态 功能 开发 


6.1 | 网 站 模版 功能 特点 分 析 


电子 商务 网 站 需要 拥有 普通 企业 网 站 的 一 些 常用 功能 ， 如 新 闻 系 统 、 会 员 管 理 系统 、 产 品 
发 布 系统 、 购 物 车 系统 和 后 台 维 护 系统 等 。 所 有 的 动态 系统 并 不 是 独立 开发 的 ， 而 是 相互 之 间 
存在 关联 的 。 对 于 建立 网 站 的 读者 而 言 ， 没 有 必要 成 为 一 个 专业 写 程 序 的 开发 人 员 ， 但 要 使 用 
己 的 独立 网 站 ， 对 本 书 的 实例 做 一 个 全 面 的 了 解 还 是 很 有 必要 的 ， 这 也 是 为 了 满足 后 面 维护 
和 修改 网 站 的 需要 。 


611 ”模版 站 点 文件 夹 规划 


在 应 用 网 站 模版 之 前 ， 应 该 把 网 站 模版 程序 内 容 放 置 在 本 地 计算 机 的 硬盘 上 。 为 了 方 
便 站 点 的 设计 及 上 传 ， 设计 好 的 网 页 都 应 存储 在 一 个 目录 下 ， 再 用 合理 的 文件 夹 来 管理 文 
档 。 本 模版 的 特点 如 下 : 


1. 合理 的 文件 夹 


在 本 地 站 点 中 应 该 用 文件 夹 来 合理 构建 文档 的 结构 。 首 先 为 站 点 创建 一 个 主要 文件 
(实例 在 C di F C:\Apache\htdocs\shop 创建 了 shop 文件 夹 )， 然 后 在 文件 夹 中 再 创建 多 个 
文件 来 ， 最 后 将 文档 分 类 存储 到 相应 的 文件 夹 下 。 例 如 ， 可 以 在 images 的 文件 夹 中 放置 
站 页 面 的 图 片 ， 可 以 在 date 文件 夹 中 放置 数据 库 文件 ， 可 以 在 admin. 文件 夹 中 放置 关于 全 
理 者 后 台 管理 的 网 页 ， 图 6-1 所 示 的 是 将 要 完成 的 实例 中 建立 的 文件 夹 以 及 网 页 文档 。 


2. 合理 的 文件 名 称 
由 于 网 站 建设 要 生成 的 文件 很 多 ， 所 以 要 使 用 合理 的 文件 名 称 。 这 样 操作 的 目的 ， 一 
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是 为 了 在 网 站 的 规模 变 得 很 大 时 ， 可 以 方便 地 进行 修改 和 更 新 ， 二 是 为 了 使 浏览 者 在 看 了 网 
页 的 文件 名 之 后 ， 就 能 够 知道 网 页 所 要 表述 的 内 容 。 
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图 6-1 网 站 在 本 地 硬盘 上 的 文件 夹 建立 


合理 的 文件 名 时 要 注意 以 下 几 点 ; 
第 一 : 尽量 使 用 短文 件 来 命名 。 

第 二 : 应 该 避免 使 用 中 文 文件 名 ， 一 方面 ， 因 为 很 多 Internet 服务 器 使 用 的 是 英文 操作 
系统 ， 不 能 对 中 文 文件 名 提供 很 好 的 支持 ;， 男 一 方面 ， 浏 览 网 站 的 用 户 也 可 能 使 用 的 是 英文 
操作 系统 ， 中 文 文件 名 同样 可 能 导致 浏览 错误 或 访问 失败 。 

第 三 : 建议 在 构建 的 站 点 中 ， 全 部 使 用 小 写 的 文件 名 称 。 

在 应 用 模版 时 ， 只 需要 将 整个 模版 的 程序 复制 到 Apache 服务 器 的 htdocs 文件 夹 即 可 。 
不 要 乱 改 文件 夹 和 文件 的 名 称 ， 否 则 会 出 错 。 


3. 本 地 和 远程 站 点 为 相同 的 文件 结构 


在 本 地 站 点 中 规划 设计 的 网 站 文件 结构 ， 要 同上 传 到 Internet 服务 器 中 被 人 浏览 的 网 站 
文件 结构 相同 。 这 样 在 本 地 站 点 上 相应 的 文件 夹 和 文件 上 的 操作 ， 都 可 以 同 远 程 站 点 上 的 文 
件 夹 和 文件 一 一 对 应 。Dreamweaver CS6 将 整个 站 点 上 传 到 Internet 服务 器 上 ， 以 保证 远程 
站 点 是 本 地 站 点 的 完整 的 复制 ， 同 时 方便 浏览 和 修改 。 


4. 流畅 的 浏览 顺序 


在 创建 网 站 的 时 候 首 先 要 考虑 的 是 网 站 所 有 页 面 的 浏览 顺序 ， 注 意 主 次 页 面 之 间 的 链 
接 是 否 流畅 。 如 果 采 用 标准 统一 的 网 页 组 织 形式 ， 则 可 以 让 用 户 轻松 自如 地 访问 每 个 需要 访 
问 的 网 页 ， 这 样 能 加 大 网 站 的 访问 量 。 
建立 站 点 的 浏览 顺序 ， 要 注意 如 下 几 个 方面 : 
第 一 : 每 个 页 面 建立 首页 的 链接 
在 网 站 所 有 的 页 面 上 ， 都 要 放置 返回 主页 的 链接 。 如 果 在 网 页 中 包含 返回 主页 的 链 


就 可 以 保证 用 户 在 不 知道 自己 目前 位 置 的 情况 下 ， 快 速 地 返回 到 首页 中 ， 重 新 开始 浏览 
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站 点 中 的 其 他 内 容 。 
第 二 : 建立 网 站 导航 

应 该 在 网 站 任何 一 个 页 面 上 建立 网 站 导航 ， 通 过 导航 提供 站 点 的 简明 目录 结构 ， 引 导 
用 户 从 一 个 页 面 快速 地 进入 到 其 他 的 页 面 。 

第 三 : 突出 当前 页 位 置 

在 网 站 页 面 很 多 的 情况 下 ， 往 往 需要 加 入 当前 页 在 网 站 中 的 位 置 说 明 ， 或 者 是 加 入 说 
明 的 主题 ， 以 帮助 浏览 者 了 解 他 们 现在 访问 的 是 什么 地 方 。 如 果 页 面 嵌 套 过 多 ， 则 可 以 通过 
创建 “前 进 ” 和 “后 退 ” 之 类 的 链接 ， 来 帮助 浏览 者 进行 浏览 。 

第 四 : 增加 搜索 和 索引 功能 

对 于 一 些 带 数据 库 的 网 站 ， 还 应 该 给 浏览 者 提供 搜索 的 功能 ， 或 是 给 浏览 者 提供 索引 
检索 的 权利 ， 使 用 户 能 快速 地 查找 到 自己 需要 的 信息 。 
第 五 : 必要 的 信息 反馈 功能 

网 站 建立 发 布 后 ， 都 会 存在 一 些小 问题 ， 从 浏览 者 那里 及 时 获取 他 们 对 网 站 的 意见 和 
建议 是 非常 重要 的 。 为 了 及 时 从 用 户 那里 了 解 到 相关 的 信息 ， 应 该 在 网 页 上 提供 用 户 同 网 页 
创作 者 或 网 站 管理 员 的 联系 途径 。 常 用 的 方法 是 建立 留言 板 或 创建 一 个 E-mail 超级 链接 ， 
帮助 用 户 快速 地 将 信息 回馈 到 网 站 中 。 


61.2 ”电子 商城 系统 功能 


B2C 电子 商城 实用 型 网 站 是 在 网 络 上 建立 一 个 虚拟 的 购物 商场 ， 让 访问 者 在 网 络 上 购 
物 。 网 上 购物 以 及 网 上 商店 的 出 现 ， 简 化 了 挑选 商品 的 繁琐 过 程 ， 让 人 们 的 购物 过 程 变 得 轻 
松 、 人 快捷、 方便， 很 适合 现代 人 快 节奏 的 生活 ， 同 时 又 能 有 效 地 控制 “商场 ”运营 的 成 本 ， 
为 商家 开辟 了 一 个 新 的 销售 渠道 。 本 实例 是 通过 PHP-MySQL 直接 用 手写 程序 完成 的 实 
例 ， 完 成 的 首页 如 图 6-2 所 示 。 


Internet Pxplorer 
) mc RW IAT "Po 
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本 网 站 主要 能 够 实现 的 功能 如 下 : 

D 开发 了 强大 的 搜索 以 及 高 级 查询 功能 ， 能 够 快捷 地 找到 感 兴趣 的 商品 。 

2) 采取 会 员 制 保证 交易 的 安全 性 。 

3) 流畅 的 会 员 购 物流 程 : 浏览、 将 商品 放 入 购物 车 、 去 收银 台 。 每 个 会 员 都 有 自己 专 
用 的 购物 车 ， 可 随时 订购 自己 中 意 的 商品 ， 然 后 结账 完成 购物 。 购 物 的 流程 是 指导 购物 车 系 
统 程序 编写 的 主要 依据 。 

4) 完善 的 会 员 中 心服 务 功能 ， 可 随时 查看 账目 明细 、 订 单 明细 。 

5) 设计 会 员 价 商品 展示 ， 能 够 显示 企业 近期 所 促销 的 一 些 会 员 价 商品 。 

6) 人 性 化 的 网 站 留言 设置 ， 可 以 方便 会 员 和 管理 者 进行 沟通 。 

7) 后 台 管 理 模块 ， 可 以 通过 使 用 本 地 数据 库 ， 保 证 购物 订单 安全 及 时 有 效 地 处 理 ， 强 
大 的 统计 分 析 功 能 ， 便 于 管理 者 及 时 了 解 财务 状况 、 销 售 状况 。 


6.1.3 ”功能 模块 需求 分 析 


将 要 建设 的 电子 商城 系统 主要 由 如 下 儿 个 功能 模块 组 成 : 
1) 前 台 网 上 销售 模块 。 指 客户 在 浏览 器 中 所 看 到 的 直接 与 店主 面对面 的 销售 程序 ， 包 
括 浏 览 商品 、 订 购 商 品 、 查 询 定 购 及 购物 车 等 功能 。 本 实例 的 搜索 页 面 如 图 6-3 所 示 。 


图 6-3 用 户 高 级 搜索 


2) 后 台数 据 录入 模块 。 前 台所 销售 商品 的 所 有 数据 ， 其 来 源 都 是 后 台所 录入 的 数据 。 
后 台 的 产品 录入 页 面 如 图 6-4 所 示 。 

3) 后 台数 据 处 理 功 能 模块 。 是 相对 于 前 台 网 上 销售 模块 而 言 的 ， 网 上 销售 的 数据 都 放 
在 销售 数据 库 中 ， 后 台数 据 处 理 模 块 的 功能 就 是 对 这 部 分 的 数据 进行 处 理 。 后 台 订 单 处 理 页 
面 如 图 6-5 所 示 。 

4) 用 户 注册 功能 模块 。 用 户 当 然 并 不 一 定 立即 就 要 买 东 西 ， 可 以 先 注册 ， 任 何 时 候 都 
可 以 来 买 东 西 ， 用 户 注册 的 好 处 在 于 买 完 东西 后 无 须 再 输入 一 大 堆 个 人 信息 ， 只 须 将 账号 和 
密码 输入 就 可 以 了 。 会 员 注 册页 面 如 图 6-6 所 示 。 
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5) 购物 车 模块 。 客 户 购 买 完 商品 后 ， 系 统 会 自动 分 配 一 个 购物 号 码 给 客户 ， 以 方便 
客户 随时 查询 账单 的 处 理 情况 ， 了 解 当 前 货物 的 状态 。 客 户 订购 后 结算 中 心 页 面 如 图 6-7 
所 示 。 
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) 会 员 留 言 模块 。 通 过 该 模块 ， 客 户 能 及 时 反馈 信息 ， 管 理 员 能 在 后 台 及 时 回复 信 
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图 6-8 用 户 留言 页 面 


6.2 | 电子 商城 数据 库 设计 
网 上 购物 系统 的 数据 库 也 是 比较 庞大 的 ， 在 设计 的 时 候 需 要 从 使 用 的 功能 模块 入 手 ， 
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分 别 创建 不 同 命 名 的 数据 表 ， 命 名 的 时 候 也 要 与 使 用 的 功能 命名 相配 合 ， 方 便 后 面相 关 页 面 
设计 制作 时 的 调用 。 本 章节 将 要 完成 的 数据 库 命名 为 db_shop， 在 数据 库 中 建立 8 个 不 同 的 


数据 表 ， 如 图 6-9 所 示 。 
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6.24 创建 系统 数据 库 


经 过 前 面 的 功能 分 析 发 现 ， 数 据 库 应 该 建立 不 同 的 数据 表 来 分 别 保存 注册 用 户 、 管 理 


men, 


图 6-9 ”建立 的 db_shop 数据 库 


员 、 留 言 、 商 城 订 单 和 产品 表 等 。 在 数据 库 中 必须 包含 一 个 容纳 上 述 信息 的 数据 表 ， 将 数据 
库 命 名 为 db Shop, 接 下 来 就 要 使 用 phpmyAdmin ooo db shop， 作 为 任何 数 


据 表 查询 、 新 增 、 修 改 与 删除 的 后 端 广 持 ， 下 面 将 详细 介绍 tb. admin 数据 表 的 创建 方法 。 


创建 的 操作 步 又 如 下 : 


1) 在 下 浏览 器 中 输入 http://127.0.0.1/phpmyadmin/， 在 打开 的 页 面 中 ， 输 入 MySQL 的 


用 户 名 root 和 密码 admin. (这 里 要 注意 ， 
所 示 。 


如 果 是 XAMPP 集成 的 环境 则 密码 为 室 )， 如 图 6-10 


欢迎 使 用 phpMyAdmin 


中 文 - Chinese simpkfhied 


E | 


图 6-10 打 ] 


F phpMyAdmin 登录 界面 
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2) 单 击 “执行 ”按钮 即 可 进入 软件 的 管理 界面 ， 选 择 相关 数据 库 可 看 到 数据 库 中 的 各 
表 ， 可 进行 表 、 字 段 的 增 、 删 、 改 ， 可 以 导入 、 导 出 数据 库 信 息 ， 如 图 6-11 所 示 。 


* 服务 器 localhost wa TCP/IP 
e 服务 占线 本 5515 
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图 6-11 软件 的 管理 界面 

3) 单 击 选择 加 数据 库 命令 ， 打 开本 地 的 “数据 库 ” 管 理 页 面 ， 在 “新 建 数 据 库 ” 文 本 框 
中 输入 数据 库 的 名 称 db_shop， 单 击 后 面 的 数据 库 类 型 下 拉 菜 单 ， 在 弹出 的 选择 项 中 选择 
gb2312 chinese ci 选项 ， 如 图 6-12 所 示 。 
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图 6-12 ”创建 数据 库 页 面 


说 明 : 

gb2312 是 数据 库 的 编码 格式 ， 通 常 在 开发 php 动态 网 站 的 时 候 Dreamweaver 默认 的 格 
式 就 是 utf8 格式 ， 在 创建 数据 库 的 时 候 也 要 保证 数据 库 储 存 的 格式 和 网 页 调用 的 格式 一 
样 ， 这 里 要 介绍 一 下 gb2312 bin 和 gb2312 chinese ci 的 区 别 。 其 中 ci 是 case insensitive, 
即 “ 大 小 写 不 敏感 "a 和 A 会 在 字符 判断 中 被 当做 一 样 的 ; bin 是 二 进 制 ，a 和 A 会 被 区 
别 对 待 。 
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4) 单 击 “ 创 建 ” 按 钮 ， 返 回 “ 常 规 设置 ”页 面 ， 此 时 在 数据 库 列表 中 就 已 经 建立 了 
db shop 的 数据 库 ， 如 图 6-13 所 示 。 


-— 


to 全 进 /全 不 过 GU HR 
| Went 


图 6-13 创建 后 的 页 面 


5) 数据 库 建立 后 还 要 建立 网 站 数据 库 所 需 的 数据 表 。 这 个 网 站 数据 库 的 数据 表 是 
tb_admin。 建 立 数 据 表 后 ， 接 着 单 击 左边 的 db_shop 数据 库 将 其 链接 上 ， 如 图 6-14 所 示 。 


= on TIS | 


没有 在 数据 库 中 找到 表 


TERRE db shop 'P Sie SENEC 
ZF FRR 


[35 ] 


图 6-14 开始 建 数 据 表 


6) 打开 数据 库 右 方面 面 会 出 现 “ 新 建 数 据 表 ” 的 设置 区 域 ， 含有 “名 字 ”“ 字 段 数 ” 
两 个 文本 框 ， 在 “名 字 ” 中 输入 数据 表 名 tb_admin,“ 字 段 数 ” 文 本 框 中 输入 本 数据 表 的 字 
段 数 为 3， 表 示 将 创建 3 个 字段 来 储存 数据 ， 如 图 6-15 所 示 。 

7) 再 单 击 “执行 ”按钮 ， 切 换 到 数据 表 的 字段 属性 设置 页 面 ， 输 入 数据 域名 以 及 设置 
数据 域 位 的 相关 数据 ， 有 具体 设置 如 图 6-16 所 示 。 各 字段 的 意义 见 表 6-1。 这 个 数据 表 主 要 
是 记录 后 台 管 理 者 的 信息 表 。 
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W €^ ado, SAR du E 加 导出 ESO MM MN 


设 有 在 数据 序 中 找到 表 


图 6-15 输入 数据 表 名 tb_admin 和 字段 数 


表 6-1 tb admin 数据 表 


字段 名 称 字段 类 型 字段 大 小 说 明 
id int 11 自动 编号 
name varchar 25 管理 员 用 户 名 
pwd varchar 50 登录 密码 
— 
EO E [VaRCHAR B [mT Li 
— 2s » 
人 
p [| [| L] 
Bl 000008 a [ 
这 一 i 
dil rro L a 1 
AUTO. INCREMENT. o E n 
Ei | [ | [ | 
1 LO 
> Ad 
图 6-16 设置 数据 库 字 段 属性 
8) 最 后 再 单 击 “保存 ”按钮 ， 切 换 到 “结构 ”页 面 。 实 例 将 要 使 用 的 数据 库 建立 完 
毕 ， 如 图 6-17 所 示 。 
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D127.0.0.1 / localhost 
xmv) mum sem emo IAM UM 


D gtbzadmin, m 565 Bb dime marou 0 innoO8 952312 chinese ci 16.0 KB 


Nr RM 


t 全 进 / 全 不 进 Am. 


ATER MREFA 


MERRE do shop 中 新 建 一 来 数据 表 


图 6-17 建立 的 数据 库 页 面 


6.2.2 ”设计 商城 数据 表 

数据 库 db shop 里 面 是 根据 开发 的 网 站 的 几 大 动态 功能 来 设计 不 同 数据 表 的 ， 本 实例 需 
要 创建 8 个 不 同 的 数据 表 ， 下 面 分 别 介绍 一 下 这 些 数据 表 的 功能 及 设计 的 字段 要 求 : 

1) tb admin 用 来 储存 后 台 管 理 员 的 信息 表 ， 上 一 小 节 设 计 的 tb. admin. 数据 表 如 图 6-18 


所 示 。 其 中 name 是 管理 员 名 称 ，pwd 是 管理 员 密 码 。 
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M mem 0-001 总 计 , Shit 00005 H) 


man ssu amt yu mon mapun sma NN 
aA 


+ 
B UE NM QR 1 aimin |21232097 557 537 43894100438011c3 


NU ss; acc 225 Om Bt 


"nat i — 


Juana meme nica mn I" 


IQ àG — oomen pns pne pest peni pnt y T 20 m rem 


图 6-18 后台 管理 者 表 tb admin 


2) tb dingdan 用 来 储存 会 员 在 网 上 下 的 订单 的 详细 内 容 表 ， 设 计 的 tb dingdan 数据 表 


如 图 6-19 所 示 。 
3) tb gonggao 用 来 保存 网 站 公告 的 信息 表 ， 设 计 的 tb gonggao 数据 表 如 图 6-20 


所 示 。 
4) tb_leaveword 是 用 户 给 网 站 管理 者 留言 的 数据 表 ， 设 计 的 tb_leaveword 数据 表 如 


6-21 所 示 。 
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图 6-21 用 户 留言 表 tb_leaveword 
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5) tb_pingjia 是 用 户 对 网 上 商品 的 评价 表 ， 设 计 的 tb_pingjia 数据 表 如 图 6-22 所 示 。 


[ge mso wanna Rss (PES). (EWR 0000335 ) 


D'id int(4) € X —AUTO INCREMENT JP iit O MP v 更 多 
AER O > 
D 3 spid mt J OM v WS 


国 国 全 过 /全 下 过 arn Mas P Dm P xn Me- Eer IE 空间 Hem 


dh men s 
x pkgGo[ treo rear o tsrs otaw BET 


图 6-22 ”商品 用 户 评价 表 tb_pingjia 


6) tb shangpin 是 商品 表 ， 购 物 系统 中 核心 产品 的 发 布 以 及 定购 时 的 结算 都 要 调用 该 数 
据 表 的 内 容 ， 设 计 的 tb_shangpin 数据 表 如 图 6-23 所 示 。 


文件 DJ) woo 查看 WV) ERA IAT 带 助 90 
os'-Oo-ug6|P^»* zez 0|O-b M-E 


nt(4) W OX —AUIO NCREMENT EUM O NR v 更 多 
JEA OM v) 

D 3 jianjie mediumtext gb2312 chinese ci 是 nuu HO Wt v WS 
ON 

D 5 dengji varchar) — gb2312 chinese ci 是 nuu J"9* ON v WS 
2s oM 

P 7 wplan varcharQOD) gb2312 chinese ci 是 vuu AED © WR v WS 
. AER O ~) 

D 9 cshu int(4) 是 nuu JS ON? v WS 
ARR om ~ 

E 1 ypeid in(4) $ nuu JS. ON vE 
ZE ONE 

E 13 shichangjla varchar25) gb2312_chinese_ci 是 nuu RO Mt v WS 
Er ZS 
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图 6-23 ”商品 表 tb_shangpin 


7) tb type 是 商品 的 分 类 表 ， 设 计 的 tb_type 数据 表 如 图 6-24 所 示 。 
8) tb user 用 来 保存 网 站 会 员 注册 用 的 数据 表 ， 设 计 的 tb. user 数据 表 如 图 6-25 所 示 。 
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$ 127.0.0.1 / localhost / db_shop / tb_type | phpiyádain 3.5.0 
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Fes pesi ER ternet 
图 6-25 ”网 站 用 户 信 息 表 tb_user 
上 面 设计 的 数据 表 属 于 比较 复杂 的 数据 表 ， 数 据 表 之 间 主 要 通过 产品 的 类 别 ID 相关 
联 。 建 立 网 站 所 需要 的 主要 内 容 信 息 ， 都 能 储存 在 数据 表 里 面 。 
6.2.3 ”建立 数据 库 连 接 


数据 库 设 计 之 后 ， 需 要 将 数据 库 链 接 到 网 页 上 ， 这 样 网 页 才能 调用 数据 库 和 储存 相应 
的 信息 。 用 PHP 开发 的 网 站 ， 一 般 将 数据 库 链接 的 程序 代码 文件 命名 为 conn.php。 在 站 点 
文件 夹 中 创建 conn.php 空白 页 面 ， 并 输入 图 6-26 所 示 的 数据 库 链接 代码 。 
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$ C:\åpachejhtdocs\shop\conniconn. php 6:5: 60 109) DER) 


onn-mysql connect “localhost”, "roo 
or die 数据 库 服务 器 连接 错误 " .mysql_error 0): 
mysql select db('db shop',$conn) or die( 
“数据 库 访问 错误 ". mysql error Q2: 


mysql query( set names gb2312"); 
?» 


E 
| 


1 /1 秒 | 简体 中 让 (GB2312) 


图 6-26 设置 数据 库 链 接 


本 链接 的 程序 说 明 如 下 : 


<?php 
$conn=mysql connect("localhost","root","admin") or die(" 数 据 库 服务 器 连接 错误 ".mysql error()); 
/设置 数据 库 连 接 ， 本 地 服务 器 ， 用 户 名 为 root， 密 码 为 admin， 如 果 连 接 错误 调用 mysql error) 


mysql select db("db shop"$conn) or die(" 数 据 库 访问 错误 ".mysql_errorO); 
/连接 db shop 数据 库 ， 如 果 连 接 错 误 调用 mysql. error. 
mysql query("set character set gb2312"); 


mysql query("set names gb2312"); 
/设置 数据 库 的 字体 为 gb2312 即 中 文 简体 。 


?> 


读者 使 用 时 如 果 需 要 更 改 数据 库 名 称 ， 只 需要 将 该 页 面 中 的 db. shop 做 相应 地 更 改 即 可 


6.3 | 首页 动态 功能 开发 


对 于 一 个 电子 商城 系统 来 说 ， 需 要 一 个 主页 面 来 给 用 户 进行 注册 、 搜 索 商 品 、 浏 览 青 
品 等 操作 。 实 例 首 页 index.php 3EXEBCE: f font.css、top.php、left menu.php. bottom.php 等 
共 5 个 页 面 ， 本 小 节 将 介绍 left menu.php 和 index.php 所 涉及 的 动态 功能 的 设计 。 


AN 


6.3.1 网 站 导航 top.php 


导航 频道 是 网 站 建设 中 很 重要 的 部 分 ， 通 常情 况 下 一 个 网 站 的 页 面 会 有 几 十 个 ， 更 大 
型 一 点 的 可 能 会 达到 几 千 个 甚至 几 万 个 ， 并 且 每 个 页 面 都 会 有 导航 栏 。 但 是 ， 在 网 站 后 期 维 
护 或 者 需要 更 改 的 时 候 ， 这 个 工作 量 就 会 变 得 很 大 ， 所 以 为 了 方便 ， 通 常 都 会 把 导航 栏 开发 
成 单独 的 一 个 页 面 ， 然 后 让 每 个 页 面 都 单独 调用 它 。 这 样 当 需 要 变更 的 时 候 ， 只 要 修改 导航 
栏 这 一 个 页 面 ， 其 他 的 页 面 就 全 部 自动 更 新 了 。 实 例 创 建 的 导航 栏 如 图 6-27 所 示 。 实 例 的 
导航 在 前 面 章节 已 经 详细 介绍 过 ， 实 例 中 并 没有 使 用 到 PHP 编程 部 分 。 
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图 6-27 导航 频道 


0.3.2 ”购物 车 、 登 录 和 搜索 


left menu.php 页 面 中 的 “我 
态 网 站 开发 中 经 常 遇 到 的 功能 ， 在 
这 些 功 能 的 开通 方法 ， 制 作 步 又 如 下 : 
1) 打开 第 4 章 创 建 的 left menu.php 静态 页 面 ， 然 后 
库 链接 页 面 conn.php 的 命令 ， 如 下 : 


<?php 
session start(); 


include("conn/conn.php"); 
2» 


/启动 阶段 变量， 并 调用 数据 库 连 接 
加 入 后 简单 地 设计 一 下 “有 

成 后 编辑 文档 窗口 ， 如 图 6-28 所 示 。 
2)“ 我 的 购物 车 ”模块 的 基本 功能 是 


录 后 购物 ， 如 果 是 会 员 登 录 ， 就 要 显示 登录 会 


会 员 的 名 字 以 及 其 购物 车 的 总 价 ， 并 


购物 车 模块 下 订单 ， 如 图 6-29 所 示 。 
该 模块 用 PHP 编写 的 代码 如 下 : 


<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 


<td><font color="#FF3300"> 
&nbsp;&nbsp;<?php 
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ELSIBIX 


的 购物 车 ”“ 用户 系统 ”以 及 “站 内 搜索 ”3 个 栏目 ， 是 动 
BE 子 商城 中 这 几 个 功能 也 是 必 不 可 少 的 ， 下 


将 详细 介绍 


在 <head> 代 码 之 前 ， 加 入 调用 数据 


上 户 系统 ”和 “我 的 购物 车 ”两 个 功能 的 显示 效果 ， 设 计 完 


能 是 这 样 的 ， 当 以 游客 身份 登录 时 ， 提 示 游 客 要 先 登 


引导 用 户 去 


第 6 章 ， 数 据 库 和 首页 动态 功能 设计 | 
我 的 购物 车 
3 SETA : 1@] gnem 欢迎 您 
[ — — wg 


[EE] | 购物 车 总 计 : 3600 元 
i 去 收银 台 清空 购物 车 ”注销 离开 


nene pananan nin 


6-28 加 入 PHP 后 的 美工 效果 图 6-29 会 员 登 录 后 的 购物 车 效果 


R] 


if($_SESSION[username]!=""){ 
echo "用 户 : $ SESSION[username]， 欢 迎 您 ! "; 
j 
else 
fecho "用 户 : 游客 ， 欢 迎 您 ! <br>&nbsp;&nbsp; 请 先 登 录 ， 后 购物 ";} 


2» 
/如 果 登 录 者 是 会 员 就 显示 会 员 的 名 字 ， 并 显示 “欢迎 您 !”， 如 果 不 是 则 显示 “用 户 : 游客 ， 欢 
迎 您 ! 请 先 登 录 ， 后 购物 ”。 
</font></td> 
</tr> 
<tr> 
<td> 


<table width="209" border="0" align="center" cellpadding="0" cellspacing="0"> 


EM a 


«form action-"gouwuche.php" method="post" name-"form1" id-"form1"7 
// 单 击 去 收银 台 ， 提 交 表 单 到 gouwuche.php XT 
<tr> 
<td> 
<?php 

session_register("total"); 

if($_GET[qk]=="yes"){ 
$_SESSION[producelist]=""; 

$_SESSION[quatity]=""; 


o 


j 

Sarraygwc-explode("()",$ SESSION[producelist]); 

$s-0; 

for($i=0;$i<count($array gwc);$i++){ 
$s+=intval($arraygwc[$i]); 

j 

if($s--0 )( 
echo "<tr>"; 

echo" &nbsp;&nbsp; 您 的 购物 车 为 空 !"; 


181 


= 


赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


echo"</tr>"; 
} 
else{ 
?> 
<?php 
$total-0; 
Sarray-explode("(Q",$ SESSION[producelist]); 
Sarrayquatity-explode("(g",$ SESSION[quatity ]); 
while(list($name,$value)-each($ POST)){ 
for($i-0;Si«count(Sarray)-1;$i4—) f 
if((Sarray[$i])--$name)( 
Sarrayquatity[$i]-$ value; 


j 
$ SESSION[quatity |-implode(" 2)" Sarrayquatity); 


for($i=0;$i<count($array)-1;$i++){ 
$id=$array[$i]; 
$num-$arrayquatity [$i]; 


if($id!=""){ 
$sql=mysql_query("select * from tb_shangpin where id=".$id."",$conn); 
$info=mysql fetch array($sql); 
$totall-$num*$Sinfo[huiyuanjia]; 
$total--—$totall; 
$ SESSION["total"]-Stotal; 


?> 
/建立 数组 ， 从 数据 库 查 询 出 购物 车 的 总 价 。 
&nbsp; 
<?php 
j 
j 
?> 


购物 车 总 计 : <?php echo $total;?> 元 
/显示 总 价 。 


«br» 


&nbsp;&nbsp;«a href-"gouwusuan.php" 2: t 48 & «/a» «a href-"gouwuche.php?qk-yes' 


清空 购物 车 </a> 
// 单 击 “ 清 空 购物 车 ” 提交 变量 qk=yes 到 gouwche.php 页 面 。 
<?php 
j 
?> 
<?php 


if($ SESSION[username]!-"") { 
echo "&nbsp;&nbsp;-a Pre 全 logoutphp> 注 销 离开 </a> ; 
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E: 


j 
// 单 击 “ 注 销 离开 ”链接 到 logout.php 页 面 。 
9></br> 


</td> 
</tr> 
</form> 
</table></td> 
</tr> 


</table> 
3) 在 “用 户 系统 ”的 显示 界面 上 ， 提 供给 用 户 登 录 、 注 册 以 及 找 回 密码 的 功能 ， 具 体 
的 注册 和 找 回 密码 的 功能 将 在 下 一 节 介 绍 ， 这 里 重点 介绍 如 何 使 用 PHP 实现 验证 码 随 机 调 
用 并 显示 数字 的 功能 ， 程 序 如 下 : 


<?php 
$num-intval(mt rand(1000,9999)); 

/使 用 到 了 mt rand O 函数 调用 介 于 1000-9999 的 任意 一 个 数字 。 
for($i=0;$i<4;$i++){ 

echo "<img src=images/code/".substr(strval($num),$i,1).".gif>"; 
} 

// 调 用 images/code/ 文 件 夹 下 的 随机 字母 图 片 ， 并 显示 成 4 位 数 。 


?> 


该 程序 能 够 实现 图 6-30 所 示 的 随机 显示 图 片 验 证 码 数 字 的 效果 。 


[ES icm tarn 
图 6-30 ”显示 验证 码 效果 


4) 用 户 输入 用 户 名 和 和 密码， 并 单 击 “ 登 录 ” 按 钮 后 ， 要 将 输入 的 数据 传递 到 chkuser.php 
页 面 进行 登录 验证 
代码 如 下 : 


o 


ERI 一 1 


«form name-"form2" method="post" action-"chkuser.php" onSubmit-"return chkuserinput(this)"> 

说 明 : 

该 段 代 码 包 含 了 两 个 意思 ， 第 一 个 action="chkuser.php" 意 思 是 ， 转 到 chkuserphp 页 面 
进行 验证 ; 第 二 个 onSubmit-"retum chkuserinput(this)" 意 思 是 ， 直 接 调 用 JavaScript 的 
chkuserinput(this) 进 行 数据 输入 的 验证 ， 即 在 提交 表单 时 通常 要 验证 一 下 输入 的 数据 是 否 为 
空 以 及 输入 的 数据 格式 是 否 符合 要 求 。 调 用 的 程序 如 下 : 
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«script language="javascript"> 
function chkuserinput(form) ( 
if(form.username.value--"")( 
alert(" 请 输入 用 户 名 !"); 
form.username.select(); 
return(false); 
} 
// 如 果 用 户 名 没 输入 ， 则 提示 “请 输入 用 户 名 !” 
if(form.userpwd.value==""){ 
alert(" 请 输入 用 户 密码 !"); 
form.userpwd.select(); 
return(false); 
} 
/如 果 用 户 密 码 没 输入 ， 则 提示 “请 输入 用 户 密码 !” 
if(form.yz.value--"")( 
alert(" 请 输入 验证 码 !"); 


form.yz.select(); 


return(false); 

} 

/如 果 用 户 验证 码 没有 输入 ， 则 提示 “请 输入 验证 码 !” 
return(true); 

} 
</script> 


5) 页 面 最 下 面 的 “站 内 搜索 ”功能 开发 是 将 查询 文本 框 放置 到 一 个 表单 内 ， 在 单 击 
“搜索 ”时 提交 到 serchorderphp 页 面 进行 搜索 并 显示 结果 页 面 ， 在 单 击 “高 级 ”按钮 时 提交 
到 highsearch.php 页 面 进行 高 级 的 搜索 ， 该 程序 主要 典 入 在 <form> 表 单 之 内 ， 程 序 如 下 : 


«form name-"form" method="post" action="serchorder.php"> 
«tr» 

«td width-"500" height-"30" valign="middle"><div align="center"> 

«input type="text" name="name"  size-"15"  class-"inputcss"  style-"background-color:zHfff " 
onMouseOver-"this.style.backgroundColor-'Zffffff" onMouseOut-"this.style.backgroundColor-'Ze8fAff" 

«input type="hidden" name-"jdcz" value="jdcz"> 

«input name-"submit" type="submit" class-"buttoncss" value=" 搜 索 "> 

«input name-"button" type="button" class-"buttoncss" onClick-"javascript:window.location-' 
highsearch.php';" value=" 高 级 "> 

</div></td> 

</tr> 


</form> 
到 这 里 ，left_meau.php 页 面 就 开发 完毕 了 ， 将 其 保存 以 方便 其 他 页 面 的 拱 套 。 
6.3.3 首页 新 闻 显 示 功 能 


在 首页 设计 了 显示 品牌 新 闻 标 题 的 功能 ， 能 够 从 tb gonggao 新 闻 表 中 按 最 新 时 间 顺 
序 查 询 出 7 条 ， 并 将 其 标题 显示 在 首页 上 ， 通 过 单 击 新 闻 的 标题 又 能 链接 到 相应 新 闻 的 
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详细 页 面 。 

实现 的 步 又 如 下 : 

1) 为 了 能 够 实现 页 面 的 调用 ， 需 要 首先 打开 数据 库 db shop 文件 ， 然 后 再 打开 
tb gonggao 数据 表 ， 加 入 一 些 数据 ， 如 图 6-31 所 示 。 


J 127.0.0.1 / localhost / db shop / tb gonggao | phplyAdmin 3.5.0 — Microsoft 
Xo) dc) #E o IAT 


ome- 0- NOPR Sem e 2-5 Wo c 
Cog hetp://127. 0. 0. 1/shpeyadnin/ index. phy?dbzdb. sheg&tekenz JIDAI OGLIGA A 6 AVRL. 的 = 的 sdopiteblertb gongger: || 3 
^ 


NATRI TOP EEE |. AFAA FARN FEN 
TEURER PENA | OREB HAORHRARHEXEUR. — (20120429 


D AMi HEA QoS MIO XOT GG" MANeKING | MAES -SFR NHT. e 


图 6-31 加 入 数据 信息 


20 在 主页 的 “品牌 新 闻 ” 显 示 的 数据 要 实现 的 效果 是 调 出 新 闻 的 标题 ， 在 单 击 标题 时 
能 打开 详细 页 面 ， 调 出 7 条 所 有 的 数据 ， 将 所 有 的 代码 列 出 ， 说 明 如 下 : 


<?php 

$sql=mysql_query("select * from tb gonggao order by time desc limit 0,7",$conn); 
/按时 间 顺 序 从 tb_gonggao 数据 表 中 调用 7 条 数据 
$info=mysql] fetch array($sql); 

if(Sinfo—-false) ( 


2» 


«tr» 
«td height-"20" align-"center" f 7:39 [8] s 45 </td> 
</tr> 
/如 果 没 有 数据 则 显示 为 “和 暂 无 新 闻 公 告 !” 
<?php 
j 
else{ 

do{ 


?> 


<tr> 

<td height="20"><div align="center"> 

<table width="180" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 
<td width="16" height="5"><div align="center"><img src-"images/circle.gif" width="11" height="12"> 

</div></td> 

<td width="164" height="24"><div align="left"> <a href-"gonggao.php?id—-?php echo $info[id];?>"> 

// 单 击 链接 到 gonggao.php 页 面 显示 详细 内 容 页 面 。 
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<?php 
echo substr($info[title],0,30); 
if(strlen($info[title])>30){ 


echo "..."; 
j 
// 调 用 新 闻 标 题 并 控制 显示 的 字符 数 为 30， 如 果 标 题 比较 长 则 显示 为 “...” 
2» 


</a> </div></td> 


</tr> 
</table> 
</div></td> 
</tr> 
<?php 
j 
while(Sinfo-mysql fetch array($sql)); 
j 
/循环 数据 调 出 数据 库 中 的 几 笔 数据 。 
T> 
3) 在 正 浏 览 器 中 浏览 制作 的 调用 数据 的 结果 ， 其 具体 效果 如 图 6-32 所 示 。 
品牌 新 闻 : 更 多 . . 
» 低 价 婚 抄 照 背 后 的 问题 


» 高 房价 与 “ 隔 代 结 婚 ” 

» 婚 究 场地 简单 10 步 轻松 搞定 

» 瑞典 新 郎 礼服 典雅 简约 不 失 精 到 

» 警惕 婚礼 太 客车 途中 发 生 的 故障 

» 种 玫瑰 发 短信 高 钻 戒 参与 须知 

»》” 新 娘 要 “幸子 成 婚 ” 首 选 待产 新 娘 ... 


J B [3 [3 


图 6-32 “最 新 新 闻 ” 的 效果 


说 明 : 

如 此 轻易 地 就 实现 了 数据 库 的 调用 、 查 询 以 及 显示 操作 ， 读 者 会 发 现 PHP 动态 网 页 的 
开发 并 不 是 很 难 ， 只 需要 掌握 简单 的 代码 即 可 实现 。 下 面 的 所 有 其 他 功能 区 域 都 是 采用 调 
用 、 条 件 查询 、 绑 定 显 示 、 关 闭 数 据 库 这 样 一 个 相同 的 操作 步骤 来 实现 的 。 


6.3.4 产品 的 前 台 展 示 


网 站 实现 在 线 购 物 ， 一 般 都 是 通过 用 户 自身 的 登录 、 浏 览 、 定 购 、 结 算 这 样 的 流程 
来 实现 的 ， 所 以 在 首页 上 制作 产品 的 动态 展示 功能 非常 的 重要 ， 实 例 在 首页 上 设计 了 
“推荐 品牌 >“ 最 新 婚纱 ”以 及 “热门 品牌 ”三 个 显示 区 域 ， 下 面 将 介绍 产品 展示 区 域 的 
实现 方法 。 

D 上 述 的 三 个 显示 区 域 在 使 用 程序 开发 之 前 ， 首 先 要 在 Dreamweaver CS6 中 设计 好 最 
终 的 网 页 效果 ， 实 例 设 计 的 三 个 展示 区 域 如 图 6-33 所 示 ， 每 个 区 域 显示 最 新 发 布 的 两 球 产 
品 信息 ， 将 产品 的 图 片 、 价 格 、 数 量 全 部 展示 出 来 ， 并 加 入 “购买 ”和 “详细 ”按钮 。 
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图 6-33 ”设计 产品 展示 的 区 域 效果 


“推荐 品牌 ”区 域 的 实现 方法 是 ， 按 照 字 段 值 如 果 为 1 的 查询 条 件 查 询 tb shangpin 
商品 表 ， 具 体 实现 的 代码 如 下 : 


N 
dad 


«table width-"550" border="00" align="center" cellpadding-"0" cellspacing="0"> 
<tr> 
<td width="555" height="110"><table width="530"  height-"110" border="0" align="center" 
cellpadding="0" cellspacing="0"> 
«tr» 
«td width="265"> 
<?php 
$sql=mysql_query("select * from tb_shangpin where tuijian=1 order by addtime desc limit 0,1"); 
// 按 tujian=1 的 值 调用 数据 
$info=mysql fetch array($sql); 
if(Sinfo—-false)( 
echo "本 站 和 暂 无 推荐 商品 !"; 
} 
// 如 果 没 有 数据 显示 为 "本 站 暂 无 推荐 商品 " 
else{ 
9 


«table width-"270" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="130" rowspan="5"><div align="center"> 
<?php 

if(trim($info[tupian]=="")){ 

echo " 暂 无 图 片 "; 
} 
// 如 果 没 有 产品 图 片 则 显示 为 " 暂 无 图 片 " 
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else{ 
?> 
«img src-"«?php echo $info[tupian];?>" width="80" height="80" border="0"> 
<?php 
j 
?> 
</div></td> 
«td width="11" height="16">&nbsp;</td> 
<td width="124"><font color="FF6501"><img src-"images/circle.gif" width-"10" 
height-"10"7&nbsp;«?php echo $info[mingcheng];?></font></td> 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 市 场 价 :， </font><font color="FF6501"><?php echo $info[shichangjia];?> 
</font></td> 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 3 R: </font><font color="FF6501"><?php echo $info[huiyuanjia];?> 


</font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> 剩 余数 量 : </font><font color="13589B"> <?php 


if($info[shuliang]>0) 
1 
echo Sinfo[shuliang]; 
} 
else 
{ 
echo "已 售 完 "; 
} 
?> 
</font></td> 
</tr> 
«tr» 

«td height-"30" colspan-"2"-«a href-"lookinfo.php?id--?php echo 9$info[id];?>"><img src= 
"images/b3.gif' width-"34" height-"15" border="0"></a> <a href-"addgouwuche.php?id-«?php echo 
$info[id];?>"><img src-"images/bl.gif" width-"50" height-" 15" border="0"></a> </td> 

</tr> 

</table> 

<?php 

} 
?> 
</td> 
<td width="265"> 
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<?php 
$sql=mysql query("select * from tb shangpin where tuijian=1 order by addtime desc limit 1,1"); 
$info=mysq] fetch array($sql); 
if(Sinfo—-true) 
1 
?> 
«table width-"270" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="130" rowspan="5"><div align="center"> 
<?php 
if(trim($info[tupian]=="")){ 
echo " 暂 无 图 片 "; 
} 
else{ 
?> 
«img src-"«?php echo $info[tupian];?>" width="80" height="80" border="0"> 
<?php 
j 


?> 


</div></td> 

«td width="11" height="16">&nbsp;</td> 

<td width="124"><font color="FF6501"><img src-"images/circle.gif' width="10" height="10"> 
&nbsp;<?php echo $info[mingcheng];?></font></td> 

</tr> 

<tr> 

<td height=" 16"»&nbsp;«/td^ 

<td><font color="#000000"> H: </font><font color="FF6501"><?php echo $info[shichangjia];?> 
</font></td> 

</tr> 

<tr> 

<td height=" 16"»&nbsp;«/td^ 

<td><font color="#000000"> 会 员 价 : </font><font color="FF6501"><?php echo $info[huiyuanjia];?> 
</font></td> 

</tr> 

«tr» 

«td height=" 16"»&nbsp;«/td^ 

<td><font color="#000000"> 剩 余数 量 : </font><font color-"13589B" 

<?php 

if($info[shuliang]>0) 
1 


echo Sinfo[shuliang]; 
} 


else 


{ 


2-34 
echo "已 售 完 "; 


189 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


?> 
</font></td> 
</tr> 
<tr> 
«td height-"30" colspan="2"><a href="lookinfo.php?id=<?php echo S$info[id];?>"><img src= 
"images/b3.gif' width="34" height="15" border="0"></a> <a href="addgouwuche.php?id=<?php echo 
$info[id];?>"><img src-"images/b1.gif" width="50" height="15" border="0"></a> </td> 
</tr> 
</table> 
<?php 
j 
?> 
</td> 
</tr> 
</table></td> 
</tr> 
<tr> 
«td height="10" background="images/line1.gif"></td> 
</tr> 


</table> 


3)“ 最 新 婚纱 ”显示 的 是 后 台数 据 库 中 最 新 加 入 的 两 笔 数 据 ， 在 条 件 查询 的 时 候 只 
按照 增加 时 间 值 的 方法 查询 最 新 的 两 笔 数 据 并 显示 在 首页 上 即 可 ， 实 现 的 代码 如 下 : 


98 


«table width-"540" height-"110" border-"0" align="center" cellpadding-"0" cellspacing-"0" 

<tr> 

<td width="265"> 

<?php 

$sql=mysql_query("select * from tb_shangpin order by addtime desc limit 0,1"); 

// 按 增加 的 时 间 值 调用 数据 

$info=mysql fetch array($sq]); 

if($info==false){ 

echo "本 站 和 暂 无 推荐 产品 !"; 

}/ 如 果 没 有 数据 则 显示 “本 站 暂 无 推荐 产品 ” 
else{ 

?> 

«table width-"270" border="0" cellspacing="0" cellpadding="0"> 
<tr> 


<td width="130" rowspan="5"><div align="center"> 
<?php 
if(trim($info[tupian]=="")){ 
echo " 暂 无 图 片 "; 
j 
else{ 
?> 
«img src="<?php echo $info[tupian];?>" width="90" height="120" border="0"> 
<?php 
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} 
?> 
</div></td> 
«td width="11" height=" 16">&nbsp;</td> 
<td width="124"><font color="FF6501"><img src-"images/circle.gif' width="10" height= 
"10">&nbsp;<?php echo $info[mingcheng];?></font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> TT]: </font><font color="FF6501"><?php echo $info[shichangjia];?> 
</font></td> 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color='"#000000 心 会 员 价 : </font><font color="FF6501"><?php echo $info[huiyuanjia];?> 
</font></td> 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 剩 余数 量 : </font><font color="13589B"> 


<?php 
if($info[shuliang]>0) 
1 
echo Sinfo[shuliang]; 
} 
else 
{ 
echo "已 售 完 "; 
} 
?> 
</font></td> 
</tr> 
«tr» 


«td height-"30" colspan-"2"-«a  href-"lookinfo.php?id--?php echo S$info[id];?>"><img src= 
"jmages/b3.gif' width-"34" height-"15" border="0"></a> <a href-"addgouwuche.php?id--?php echo 
$info[id];?>"><img src-"images/bl.gif" width-"50" height-" 15" border="0"></a> 

</td> 

</tr> 

</table> 

<?php 

j 

?> 

</td> 

<td width="265"> 

<?php 

$sql=mysql_query("select * from tb_shangpin order by addtime desc limit 1,1"); 
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$info=mysql fetch array($sql); 
if(Sinfo--true) 
1 
?> 
«table width-"270" — border-"0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="130" rowspan="5"><div align="center"> 
<?php 
if(trim($info[tupian]=="")){ 
echo " 暂 无 图 片 "; 
} 
else{ 
?> 
«img src-"«?php echo $info[tupian];?>" width="90" height="120" border="0"> 
<?php 
j 
?> 
</div></td> 
<td width="11" height="16">&nbsp;</td> 
<td width="124"><font color="FF6501"><img src-"images/circle.gif' width="10" height="10"> 
&nbsp;<?php echo $info[mingcheng];?></font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> 市 场 价 :， </font><font color="FF6501"><?php echo $info[shichangjia];?> 
</font></td> 
</tr> 
«tr» 
«td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 会 员 价 :， </font><font color="FF6501"><?php echo $info[huiyuanjia];2 
</font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> 剩 余数 量 : </font><font color="13589B"> 
<?php 
if($info[shuliang]>0) 
{ 
echo $info[shuliang]; 


unl 


?> 


</font></td> 
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</tr> 
<tr> 
«td  height-"30" colspan="2"><a href="lookinfo.php?id=<?php echo $infoļ[id];?>"><img 
src-"1mages/b3.gif' width="34" height="15" border="0"></a> «a href-"addgouwuche.php?id--?php echo 
$info[id];?>"><img src-"images/b1.gif" width="50" height="15" border="0"></a> </td> 
</tr> 
</table> 
<?php 
j 
?> 
</td> 
</tr> 


</table> 


4)“ 热 门 品牌 ”在 条 件 查询 的 时 候 按 照 符合 cishu 字段 被 访问 最 多 的 次 数 显示 ， 实 现 的 
代码 如 下 : 


<table width="540" height="110" border="0" align="center" cellpadding="0" cellspacing="0"> 
«tr» 
«td width="275"> 
<?php 
$sql=mysql query("select * from tb shangpin order by cishu desc limit 0,1"); 
Sinfo-mysql fetch array($sql); 
if(Sinfo—-false)( 
echo "本 站 暂 无 推荐 产品 !"; 
j 
else ( 
?> 
«table width="270" border="0" cellspacing="0" cellpadding="0"> 
<tr> 


<td width=" 130" rowspan="5"><div align="center"> 
<?php 
if(trim($info[tupian]=="")){ 
echo " 暂 无 图 片 "; 
j 
else 
?> 
<img src-"«?php echo $info[tupian];?>" width="90" height="120" border="0"> 

<?php 
j 
?> 

</div></td> 
<td width="11" height=" 16">&nbsp;</td> 

<td width="124"><font color="FF6501"><img src-"images/circle.gif' width="10" height= 

"10">&nbsp;<?php echo $info[mingcheng];?></font></td> 

</tr> 


<tr> 
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«td height-" 16" »&nbsp;«/td^ 
<td><font color-"4000000' 1137/0: </font><font color="FF6501"><?php echo $info[shichangjia];? 
«/font»«/td^ 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 会 员 fff: </font><font color="FF6501"><?php echo $info 
[huiyuanjia];?> </font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> 剩 余数 量 : </font><font color="13589B"> 
<?php 
if($info[shuliang]>0) 
1 
echo Sinfo[shuliang]; 


?> 
</font></td> 
</tr> 
<tr> 
«td height-"30" colspan="2"><a href="lookinfo.php?id=<?php echo S$info[id];?>"><img 
src-"1mages/b3.gif' width="34" height="15" border="0"></a> «a href="addgouwuche.php?id=<?php echo 
$info[id];?>"><img src-"images/bl.gif" width="50" height="15" border="0"></a> </td> 


</tr> 
</table> 
<?php 
j 
?> 
</td> 
<td width="255"> 
<?php 
$sql=mysql query("select * from tb_shangpin order by cishu desc limit 1,1 "); 
Sinfo-mysql fetch array($sql); 
if(Sinfo--true)( 
?> 


«table width-"270" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width=" 130" rowspan="5"><div align="center"> 
<?php 
if(trim($info[tupian]=="")){ 
echo " 暂 无 图 片 "; 
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} 
else{ 
7> 
«img src="<?php echo $info[tupian];?>" width="90" height="120" border="0"> 
<?php 
} 
?> 
</div></td> 
«td width="11" height="16">&nbsp;</td> 
«td width="124"><font color="FF6501"><img src="images/circle.gif” width="10" 
height="10">&nbsp;<?php echo $info[mingcheng];?></font></td> 
</tr> 
<tr> 
<td height=" 16">&nbsp;</td> 
<td><font color="#000000"> 市 34 价 : </font><font color="FF6501"><?php echo $info 
[shichangjia];?></font></td> 
</tr> 
<tr> 
<td height=" 16"»&nbsp;«/td^ 
<td><font color="#000000"> 会 员 ff: </font><font color="FF6501"><?php echo $info 
[huiyuanjia];?></font></td> 
</tr> 
«tr» 
«td height=" 16" 7 &nbsp;«/td^ 
<td><font color="#000000"> 剩 余数 量 : </font><font color-"13589B"- 


<?php 
if($info[shuliang]>0) 
1 
echo Sinfo[shuliang]; 
} 
else 
{ 
echo 已 售 完 "; 
} 
?> 
</font></td> 
</tr> 
<tr> 


«td height-"30" colspan="2"><a href="lookinfo.php?id=<?php echo S$info[id];?>"><img 
src-"1mages/b3.gif' width="34" height="15" border="0"></a> «a href-"addgouwuche.php?id--?php echo 
$info[id];?>"><img src-"images/b1.gif" width-"50" height-" 15" border="0"></a> </td> 

</tr> 
</table> 
<?php 
j 


?></td> 
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</tr> 
</table> 
按 上 述 的 程序 实现 方法 ， 最 后 可 以 实现 的 效果 如 图 6-34 所 示 。 
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» PR E -euwe 

mem NEW oem 
&IM a0 APTAS SBR: wwo 
fm: wo 1 ME: 1w 


u g mamm WD (273983) 


首 页 |ŻENN | WBA | IPAR | KERN 


图 6-34 首页 的 商品 展示 效果 
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网 上 购物 系统 通常 拥有 产品 发 布 功 能 、 订 单 处 理 功能 、 购 物 车 功能 等 动态 功能 。 管 理 
者 登录 后 台 管 理 ， 即 可 进行 商品 维护 和 订单 处 理 操作 。 从 技术 角度 来 说 主要 是 通过 “购物 
车 ”就 可 以 实现 电子 商务 功能 。 网 络 商 店 是 比较 庞大 的 系统 ， 它 必须 拥有 会 员 系 统 、 查 询 系 
统 、 购 物流 程 、 会 员 服务 等 功能 模块 ， 这 些 系统 通过 用 户 身 份 的 验证 后 统一 进行 使 用 ， 从 技 
术 角 度 上 来 分 析 ， 难 点 就 在 于 数据 库 中 各 系统 数据 表 的 关联 。 本 章 主要 介绍 使 用 PHP 进行 
网 上 购物 系统 前 台 功 能 模块 开发 的 方法 。 


本 章 重 点 介绍 如 下 知识 : 
会 员 管 理 系 统 功能 
品牌 新 闻 展示 系统 
产品 的 定购 功能 

(7 网 站 的 购物 车 功能 


vaugu 


11 | 会 员 管理 系统 功能 


网 站 的 会 员 管 理 系 统 ， 在 首页 上 只 是 一 个 让 用 户 登 录 和 注册 的 窗口 。 输 入 用 户 名 和 密 
人 码 后 ， 单 击 “ 提 交 ” 按 钮 ， 即 转 到 chkuserphp 页 面 进行 判断 登录 。 当 单 击 “注册 ”文字 链 
接 时 ， 将 会 打开 网 站 的 会 员 注 册页 面 agreereg.php 进行 注册 。 单 击 “ 找 回 密码 ”会 弹出 找 回 
密码 的 Windows 对 话 窗口 ， 本 小 节 就 介绍 会 员 管 理 系统 的 开发 。 


7.1.1 会 员 登 录 判 断 


会 员 在 首页 输入 用 户 名 和 密码 后 单 击 “ 提 交 ” 按 钮 时 ， 用 户 名 、 密 码 、 验 证 码 全 部 正 
外 才 可 以 登录 成 功 ， 如 果 有 错误 就 需要 显示 相关 的 错误 信息 ， 所 有 的 功能 都 要 用 PHP 进行 
分 析 判 断 ， 创 建 一 个 空白 PHP 页 面 ， 并 命名 为 “chkuser.php”。 

在 该 页 面 中 加 入 如 下 代码 : 


zu 


<?php 

include("conn/conn.php"); 

/调用 数据 库 连 接 

$username-$ POST[username]; 
$userpwd=md5($ POST[userpwd]); 
$yz-$ POST[yz]; 

$num-$ POST[num]; 
if(strval($yz)!-strval($num)) ( 
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echo "<script>alert(' 验 证 码 输入 错误 !");history.go(-1);</script>"; 
exit; 
} 
// 如 果 验 证 码 错误 则 提示 “验证 码 输入 错误 !”， 并 且 返 回 登 录 页 玫 
class chkinput( 


var $name; 
var $pwd; 
function chkinput($x,Sy)1 
Sthis-^name-$x; 
Sthis-»pwd-$y; 
} 
function checkinput(){ 
include("conn/conn.php"); 
$sgl-mysql query("select * from tb user where name-" Sthis-^name."",$conn); 
$info=mysql fetch array($sql); 
if(Sinfo—-false)( 
echo "<script language='javascript>alert(' 不 存在 此 用 户 ! ");history.back();«/script»"; 


exit; 
} 
// 如 果 数 据 库 里 不 存在 该 用 户 名 则 显示 “不 存在 此 用 户 ” 并 返回 。 
else{ 


if($info[dongjie]==1){ 
echo "<script language=javascript>alert(' 该 用 户 已 经 被 冻结 ! ";history.back();«/script^"; 
exit; 
j 
/如 果 用 户 已 经 在 后 台 冻 结 ， 则 显示 “该 用 户 已 经 被 冻结 !” 并 且 返 回 
if(Sinfo[pwd]--Sthis-^pwd) 
{ 


session start(); 
$ SESSION[username]-$info[name]; 
session register("producelist"); 
$producelist-""; 
session register("quatity"); 
$quatity-""; 
header("location:index.php"); 


exit; 
j 
else ( 
echo "<script language='javascript>alert(' 密 人 码 输入 错误 ! );history.back(); «/script^"; 
exit; 
j 
// 如 果 用 户 密 码 错误 ， 则 显示 “密码 输入 错误 !” 并 且 返 区 
} 
} 
} 
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$obj=new chkinput(trim($username),trim(Suserpwd)); 
$obj->checkinput(); 
?> 


该 段 程序 中 ， 加 入 了 判断 是 否 验 证 码 、 用 户 名 以 及 密码 正确 的 代码 ， 如 果 不 正确 则 显 
示 相 应 的 错误 信息 ; 如 果 全 部 正常 则 登录 成 功 并 返回 登录 的 首页 。 


7.1.2 会 员 注 册 功 能 


会 员 注 册 的 功能 并 不 只 是 简单 的 一 个 网 页 就 能 实现 的 ， 它 需要 同意 协议 来 判断 用 户 是 
否 存在 。 写 入 数据 等 细节 的 步骤 ， 这 里 介绍 如 下 : 

1) 单 击 “注册 ”文字 链接 时 ， 将 会 打开 网 站 的 会 员 注 册页 面 agreereg.php， 该 页 面 的 效 
果 如 图 7-1 所 示 。 该 页 面 的 内 容 是 必 不 可 少 的 ， 提 示 一 下 网 站 管理 者 ， 为 了 避免 日 后 注册 用 
户 会 发 生 一 些 纠纷 ， 需 要 提前 将 网 站 所 提供 的 具体 服务 和 约束 等 ， 放 到 注册 信息 里 面 ， 这 样 
可 以 有 效 的 保护 自己 的 利益 。 
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2) 单 击 “同意 ”按钮 后 ， 就 打开 具体 的 注册 用 户 信 息 填写 内 容 页 ， 该 页 面 的 制作 也 比 
较 简 单 ， 只 需要 按 数 据 库 中 tb user 数据 表 的 字段 名 为 准 ， 在 注册 页 面 分 别 创建 相应 的 文本 
框 即 可 ， 设 计 的 页 面 如 图 7-2 所 示 。 

3) 其 中 的 技术 难点 在 于 “查看 昵称 是 否 已 用 ”功能 ， 在 输入 用 户 昵 称 时 ， 需 要 单 击 该 
按钮 检查 数据 库 中 是 否 存 在 该 用 户 昵 称 ， 实 现 该 功能 的 代码 如 下 : 


«script language="javascript"> 
function chknc(nc) 


1 


window.open("chkusernc.php?nc-"-*nc,"newframe","width-200,height-10,1eft-500,top-200,menubar- 
no,toolbar-no,location-no,scrolIbars-no,location-no"); 


j 
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图 7-2 ”用户 注册 信息 的 页 面 


// 单 独 打 开 Windows 窗口 通过 调用 chkusernc.php 页 面 进行 判断 
</script> 


vi 


S orraaaaaaaaaa d 3 


MAREKET UL IRE XE chkusernc.php， 该 页 面 的 代码 如 下 : 


<?php 
$nc=trim($_GET[nc]}; 
2» 
<?php 
include("conn/conn.php"); 
?> 
<html> 
<head> 
<title> 
昵称 重用 检测 
</title> 
<link rel="stylesheet" type="text/css" href="css/font.css"> 
</head> 
<body topmargin="0" leftmargin="0" bottommargin="0"> 
<table width="200" height="100" border="0" align="center" 
bgcolor="#eeeeee"> 


<tr> 
<td height="50"><div align="center"> 
<?php 
if($nc=="") 
{ 
echo "请 输入 昵称 !"; 
j 


else 


1 
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cellpadding-"0" 


cellspacing-"0" 
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$sql=mysql query("select* from tb user where name=".$nc."",$conn); 
Sinfo-mysql fetch array($sql); 
if(Sinfo--true) 


{ 
echo "对 不 起 ,该 昵称 已 被 占用 !"; 
} 
else 
{ 
echo "恭喜 ,该 昵称 没 被 占用 几 ; 
j 
j 
ES 
</div></td> 
</tr> 
<tr> 


«td height="50"><div align="center"><input type="button" value=" 确定 " class="buttoncss" 
onClick="window.close()"></div></td> 
</tr> 
</table> 
</body> 


4) 在 单 击 “提交 ”按钮 时 还 要 实现 所 有 的 字段 检查 功能 ， 调 用 的 JavaScript 程序 进行 
检查 的 代码 如 下 : 


Hi 


EE 


«script language-"javascript" 


function chkinput(form) 
1 
if(form.usernc.value--"") 
1 
alert(" 请 输入 昵称 !"); 
form.usernc.select(); 
return(false); 
} 
if(form.pl .value--"") 
1 
alert(" 请 输入 注册 密码 !"); 
form.pl.select(); 


return(false); 


j 


if(form.p2.value--"") 


1 
alert(" 请 输入 确认 密码 !"); 
form.p2.select(); 
return(false); 


j 
if(form.pl.value.length«6) 


1 
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alert(" 注 册 密 码 长 度 应 大 于 61"); 
form.pl.select(); 


return(false); 


} 


if(form.pl.value!-form.p2.value) 


1 
alert(" 密 码 与 重复 密码 不 同 !"); 
form.pl.select(); 


return(false); 
j 


if(form.email.value--"") 


{ 
alert(" 请 输入 电子 邮箱 地 址 1"); 


form.email.select(); 


return(false); 


j 
if(form.email.value.indexOf('(2))«0) 


{ 
alert(" 请 输入 正确 的 电子 邮箱 地 址 1") 


form.email.select(); 


return(false); 


} 


if(form.tel.value=="") 
{ 
alert(" 请 输入 联系 电话 !"); 


form.tel.select(); 


return(false); 


} 


if(form.truename.value 


{ 
alert(" 请 输入 真实 姓名 !"); 


form.truename.select(); 


PEN XD 


return(false); 


j 


if(form.sfzh.value--"") 


{ 
alert(" 请 输入 身份 证 号 !"); 
form.sfzh.select(); 


return(false); 


j 


if(form.dizhi.value--"") 


1 
alert(" 请 输入 家 庭 住 址 1"); 
form.dizhi.select(); 
return(false); 


j 
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, 


if(form.tsda.value--"") 

{ 
alert(" 请 输 密码 提示 答 
form.tsda.select(); 
return(false); 


j 
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RM); 


if((form.ts1.value==1)&&(form.ts2.value=="")) 


1 


alert(" 请 选择 或 输入 密 
form.ts2.select(); 
return(false); 


j 


return(true); 


j 


</script> 


码 提 示 答 案 !"); 


该 段 程序 是 验证 表单 经 常 使 用 到 的 方法 ， 读 者 可 以 重点 浏览 并 掌握 


录 操 作 ， 也 就 是 实质 上 的 保存 月 


昌 户 注册 信息 的 操作 ， 其 体 的 代码 如 下 : 


<?php 

session start(); 
include("conn/conn.php"); 
$name-$ POST[usernc]; 
$pwdl-$ POST[pl]; 
$pwd-md5($ POST[p1]); 
//md5 加 密 

$email=$ POST[email]; 


$truename-$ POST[truename]; 


$sfzh-$ POST[sfzh]; 
$tel=$ POST[tel]; 
$qq-$ POST[qq]; 
i($ POST[ts1]-—1) 


{ 
$tishi=$ POST[ts2]; 
j 
else 
{ 
$tishi=$ POST[ts1]; 
j 


$huida-$ POST[tsda]; 
Sdizhi-$ POST[dizhi]; 
$youbian-$ POST[yb]; 
$regtime-date("Y-m-j"); 
$dongjie-0; 


$sql=mysql query("select * from tb user where name-" .$name.""",$conn); 


Sinfo-mysql fetch array($sql); 


5) 在 验证 表单 没 问题 后 ， 才 将 表单 的 数据 传递 到 savereg.php. 页 面 进行 数据 表 的 所 


EU 
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if(Sinfo--true) 
1 
echo "<script>alert(' 该 昵称 已 经 存在 !");history.back();</script>"; 
exit; 
j 


else 


{ 


mysql query("insert into tb user (name,pwd,dongjie,email,truename,sfzh,tel,qq,tishi, huida, 


dizhi;youbian,regtime,pwd1) values ('$name','$pwd','Sdongjie',Semail',Struename','Ssfzh'/'Stel', 
'$qq','$tishi','$huida','$dizhi','$youbian','$regtime','$pwd1")",$conn);// 按 字段 对 应 相应 的 数据 
session register("username"); 
$username-$name; 


session register("producelist"); 


$producelist-""; 
session register("quatity"); 
$quatity-""; 
echo "«script»alert(2&3£, 13:0] 352] ;window.location—'index.php';«/script^"; 
} 
/插入 数据 后 显示 注册 成 功 ， 并 返回 首页 index.php 
D> 


通过 以 上 几 个 步骤 的 程序 编写 才 完 成 一 个 会 员 注册 的 功能 ， 一 般 的 用 户 注册 都 是 这 样 
的 一 个 逻辑 实现 过 程 。 


14.9. 找 回 密码 功能 
会 员 在 使 用 过 程 中 态 记 密码 也 是 经 常 遇 到 的 事 ， 在 实例 中 单 击 “ 找 回 密码 ”文字 链接 
将 打开 相应 的 窗口 实现 找 回 密码 的 功能 ， 有 具体 的 实现 步骤 如 下 : 


1) 在 制作 的 left menu.php 页 面 中 加 入 Javascript 的 验证 代码 ， 实 现 的 功能 是 单 击 “ 找 
回 密码 ”链接 时 打开 openfindpwd.php 页 面 进行 验证 ， 代 人 码 如 下 : 


i 


EE 


«script language-"javascript" 


function openfindpwd()( 
window.open("openfindpwd.php","newframe","left-200,top-200,width-200,height-100,menubar-no,to 
olbar-no,location-no,scrollbars-no,location-no"); 


j 


</script> 


2) 使 用 Dreamweaver 设计 出 的 找 回 密码 的 页 面 如 图 7-3 所 示 ， 只 需要 一 个 简单 的 对 话 
窗口 ， 输 入 昵称 并 进行 判断 即 可 。 

3) 在 输入 需要 找 回 密码 的 昵称 之 后 ， 单 击 “ 确 定 ” 按 钮 进行 表单 验证 ， 判 断 是 否 为 
空 ， 如 果 不 为 空 则 指 问 findpwd.php 页 面 显示 “密码 提示 ” 输入 提示 的 答案 ， 如 图 7-4 所 
示 。 实 现 此 功能 的 代码 如 下 : 


LM 


«script language-"javascript" 


function chkinput(form) 
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1 


if(form.nc.value--"") 
1 
alert(" 请 输入 您 的 昵称 !"); 


form.nc.select(); 
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return(false); 
return(true); 
</script 
B C: \Apachethtdocs\shopiopenfindpwd. php -0x B C: \Apachethtdocs\shopifindpwd. php -0x 
Ed font. css T. HIRED font.css conn. php Y 


BEREH 


body> 


"- [&]éy Q [o  v| m S E 4o x jSv| 1 


DE Q 00s 


~| m (m (BN) 450 x 065v 1. : 


图 7-3 找 回 密码 的 页 苗 


4) 输入 “提示 答案 ”之 后 ， 再 单 击 “ 确 定 ” 按 钮 ， 也 要 进行 表 
示 密 但 的 页 面 showpwd.php， 验 证 的 代码 如 下 : 


«script language="javascript"> 


function chkinput(form) 
1 
if(form.da.value--"") 
1 
alert( 请 输入 密码 提示 答案 !"); 
form.da.select(); 


return(false); 


} 


return(true); 


} 


</script> 


«form name-"form2" method="post" action 


多 


7-4 € 


人 码 提 示 页 再 


单 验证 ， 并 转向 最 终 显 


5) showpwd.php 页 面 比 较 简 单 ， 只 需要 查询 数据 库 ， 把 符合 条 件 的 数据 显示 
即 把 昵称 和 密码 显示 在 页 面 上 即 可 ， 如 图 7-5 所 示 。 实 现 此 功能 的 代码 如 下 : 


<?php 
include("conn/conn.php"); 
$nc-$ POST[nc]; 

$da-$ POST[da]; 


$sql=mysql query("select * from tb user where name-"" $nc."",$conn); 


[I 
O 


showpwd.php" onSubmit="return chkinput(this)"> 


-: FH 
结果 ， 
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Sinfo-mysql fetch array($sql); 
if(Sinfo[huida]!-$da) 


{ 
echo "<script>alert(' 提 示 答 案 输入 错误 !");history.back0;</script>"; 
exit; 
} 
else 
{ 
2» 


Tl ccs cneintaoesi shop showrwi. php -Dx 


EARED fontess c 


(R os v m m BN] 450 x 165v 1. : 


图 7-5 显示 密码 页 面 


1414 用 户 中 心 功能 


用 户 登录 之 后 单 击 导 航 栏 菜单 上 的 “用 户 中 心 ” 可 以 进入 用 户 中 心 自助 管理 功能 ， 如 
图 7-6 所 示 。 用 户 中 心 可 以 实现 “修改 个 人 信息 ”“ 用 户 留言 "“ 修 改 密码 ”以 及 “注销 离 
开 ”4 个 动态 功能 ， 本 小 节 就 介绍 这 4 个 功能 的 实现 方法 。 
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图 7-6 用 户 中 心 管理 页 面 


1) 用 户 “ 修 改 个 人 信息 ”页 面 (usercenter.php〉 如 图 7-7 所 示 ， 实 现 的 办 法 是 从 数 
据 库 中 查询 出 会 员 的 基础 注册 资料 ， 将 相应 的 字段 绑 定 到 页 面 中 ， 其 中 蓝 色 文本 框 为 可 以 
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更 改 的 字段 ， 当 单 击 “ 更 改 ” 按 钮 时 ， 需 要 将 当前 修改 的 最 新 信息 储存 到 数据 库 中 。 实 现 
该 功能 的 代码 如 下 : 


WN = 


<form name="form1" method: 
<?php 
$sql=mysql_query("select * from tb user where name='".$_SESSION[username]."",$conn); 


post" action-"changeuser.php" onsubmit-"return chkinputl (this)" 


$info=mysql fetch array($sql); 
?> 
<tr> 
«td width="100" height="20" bgcolor="#FFFFFF"><div align="center"> HEK: </div></td> 
«td width="397" bgcolor="#FFFFFF"><div align="left"><?php echo $_SESSION[username];?></div></td> 
</tr> 
«tr» 
«td height-"20" bgcolor="#FFFFFF"><div align="center"> 真 实 姓名 : </div></td> 
«td height="20" bgcolor="#FFFFFF"><div align="left"> 
«input type="text" name-"truename" size="25" class="inputcssnull" value="<?php echo $info[truename];?>"> 
</div></td> 
</tr> 
<tr> 
<td height="20" bgcolor="#FFFFFF"><div align="center">E-mail: </div></td> 
<td height="20" bgcolor="#FFFFFF"><div align="left"> 


LS 


inputcssnull" value-"«?php echo $info[email];?>"> 


«input type="text" name-"email" size-"25" class 
</div></td> 
</tr> 
<tr> 
«td height="20" bgcolor="#FFFFFF"><div align="center" >QQ 号 码 : </div></td> 
«td height-"20" bgcolor=" #FFFFFF"><div align="left"> 
<input type="text" name=" 
</div></td> 
</tr> 
<tr> 
«td height="20" bgcolor="#FFFFFF"><div align="center"> 联 系 电话 : </div></td> 
«td height-"20" bgcolor="#FFFFFF"><div align="left"> 
«input type="text" name-"tel" size-"25" class="inputcssnull" value-"«?php echo $info[tel];?>"> 
</div></td> 
</tr> 
<tr> 
<td height="20" bgcolor="#FFFFFF"><div align="center"> X É£fEHE: </div></td> 
<td height="20" bgcolor="#FFFFFF"><div align="left"> 


LM 


inputcssnull" value-"«?php echo Sinfo[dizhi];?7" 


qq" size-"25" class-"inputcssnull" value="<?php echo $info[qq];?>"> 


«input type="text" name-'"dizhi" size-"25" class 
</div></td> 
</tr> 
<tr> 
«td height="20" bgcolor="#FFFFFF"><div align="center"> 邮 政 编码 : </div></td> 
«td height-"20" bgcolor="#FFFFFF"><div align="left"> 


MAII 


«input type="text" name 


EH 


youbian" size-"25" class-"inputcssnull" value="<?php echo S$info[youbian]; 27" 
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</div></td> 
</tr> 
<tr> 
«td height="20" bgcolor="#FFFFFF"><div align="center"> 5 pE: </div></td> 
<td height="20" bgcolor="#FFFFFF"><div align="left"> 
<input type="text" name="sfzh" size="25" class-"inputcssnull" value="<?php echo $info[sfzh];?>"> 
</div></td> 
</tr> 
<tr> 
<td height="20" colspan="2" bgcolor="#FFFFFF"><div align="center"> 
«input name="submit2" type="submit" class="buttoncss" value=" E "> 
&nbsp;&nbsp; 
<input name="reset" type="reset" class-"buttoncss" value=" 取 消 更 改 "> 
</div></td> 
</tr> 


</form> 


Apache\htdocs\shop\usercenter. php = 口 


a| 
—e!—— I 
R] Q pos | m (mj N| 776 x 454v 1k/1 秒 | 简体 中 六 (GB2312)| 


图 7-7 修改 个 人 信息 页 面 


表单 提交 到 changeuserphp 页 面 并 将 修改 的 数据 保存 到 数据 库 中 ， 更 新 数据 库 的 代 
码 如 下 : 


<?php 
include("conn/conn.php"); 
$email-$ POST[email]; 
$truename-$ POST[truename]; 
$sfzh-$ POST[sfzh]; 

$tel-$ POST[tel]; 

$qq-$ POST[qq]; 

$dizhi-$ POST[dizhi]; 
$youbian-$ POST[youbian]; 
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mysql query("update tb user set email='$email',truename='$truename,',sfzh='$sfzh,',tel='$tel',qq='$qq', 
dizhi-'$dizhi',youbian-'$youbian"' $conn); 
header("location:usercenter.php"); 


2» 


2)“ 用 户 留言 ”页 面 Cuserleaeveword.php) 如 网 7-8 所 示 ， 功 能 是 单 击 “ 提 交 ” 按 钮 时 
能 将 留言 的 内 容 提 交 到 数据 库 中 。 


TB c: wpachevhtaoesvshopvaserlaaveword php (XHTML) -0x 


top.php left menu php bottom. php 


iw 
jaj 


m = T ms | 
DLE D m Æ 776 x 454v 1x/18 ApG) i 


图 7-8 用 户 留 言 页 面 效 果 


saveuserleaveword.php 页 面 中 实现 用 户 留言 功能 的 代码 如 下 : 


<?php 

session start(); 

$title-$ POST[title]; 
$content-$ POST[content]; 
S$time-date("Y-m-j"); 
include("conn/conn.php"); 


$sql=mysql query("select * from tb user where name-"".$ SESSION[username].""",$ conn); 

Sinfo-mysql fetch array($sql); 

$userid-$info[id]; 

mysql query("insert into tb leaveword (title,content,time,userid) values 
('Stitle','Scontent','Stime','Suserid")",$conn); 

header("location:userleaveword.php"); 

?> 


3) 修改 用 户 密 码 页 面 如 图 7-9 所 示 。 在 页 面 中 设置 3 个 输入 文本 域 ， 在 单 击 “ 更 改 ” 
按钮 时 能 够 提交 到 savechangeuserpwd.php 页 面 进 行 验证 并 更 新 新 密码 。 
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"Bl cc wpachevhtaoes\shopvehangenaserpwa php (XHTML) PREISE 


[Aj QEqos — VIT 


i 国 
€ — E 
L] 776 x 454v 1 K / 1 秒 EPE G12) — 


图 7-9 修改 用 户 密 码 页 呈 


savechangeuserpwd.php 页 面 中 实现 更 新 密码 功能 的 代码 如 下 : 


<?php 

session start(); 
$pI-md5(trim($ POST[p1])); 
$p2-trim($ POST[p2]); 


$name-$ SESSION[username]; 
class chkchange 
{ 
var $name; 
var $pl; 
var $p2; 
function chkchange($x,$y,$z) 
{ 
$this->name=$x; 
$this->p1=$y; 
$this->p2=$z; 


} 
function changepwd() 
finclude("conn/conn.php"); 
$sql=mysql query("select * from tb user where name=" Sthis-name.""",$conn); 
$info=mysql] fetch array($sql); 
if(Sinfo[pwd]!-Sthis-^p1) 
1 
echo "<script>alert(' 原 密码 输入 错误 !");history.back();</script>"; 
exit; 
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else 


1 
mysql query("update tb user set pwd-"'mdS(Sthis-^p2)." ,pwdl='$this->p2' where 


name='$this->name"", $conn); 
echo "<script>alert(' 密 码 修改 成 功 !");history.back();</script>"; 
exit; 
} 


} 
} 
$obj=new chkchange($name,$p1,$p2); 
$obj->changepwd() 
2» 


T 
rl 
= 


羊 的 ， 链 接 到 logout.php 


4)“ 注 销 离开 ”功能 和 left meau.php 页 面 中 的 注销 离 帮 
页 面 进行 注销 即 可 ， 这 里 不 再 具体 介绍 。 


1.2 | 品牌 新 闻 展 示 系 统 


网 站 的 “品牌 新 闻 ” 在 首页 及 各 个 页 面 显示 了 标题 ， 当 单 击 相应 的 标题 时 ， 要 打开 详 
细 的 显示 内 容 页 面 gonggao.php。 网 站 的 新 闻 信 息 相 关 的 页 面 一 共 上 只 有 两 个 ，gonggao.php 用 
于 显示 具体 的 信息 内 容 ， 另 一 个 是 用 于 单 击 首页 中 的 “更 多 >>” 文 字 链 接 时 ， 打 开 所 有 的 
信息 标题 页 面 gonggaolist.php. 
1.24 ”信息 标题 列表 


所 有 的 信息 标题 列表 页 面 Cgonggaolist.php) 的 效果 如 图 7-10 所 示 。 


"B -: wpachevhtaoes\shopvgonggaolist.php (XHTML) 
HS) prio lettnenaphp botton php 


i = 一 | m 加 
MJO Q (os ~| miu vro x 428v ix / 1 秒 简体 中 文 (GB2312) c 


图 7-10 所 有 的 信息 标题 列表 页 面 的 效果 
该 页 面 的 编写 程序 部 分 如 下 : 
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<?php 
$sql=mysql_query("select count(*) as total from tb_gonggao",$conn); 
Sinfo-mysql fetch array($sql); 
Stotal-Sinfo[total]; 
if($total==0) 
{ 
echo "本 站 暂 无 公告 !"; 
} 
/调用 tb gonggao 数据 ， 如 果 没 有 则 显示 “本 站 暂 无 公告 !” 
else 


1 


?> 


<table width="530" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr bgcolor=" #EEEEEE"> 
«td width="296" height="20"><div align="center"> 公 告 主题 </div></td> 
<td width="136"><div align="center"> 发 布 时 间 </div></td> 
«td width="68"><div align="center"> 查 看 内 容 </div></td> 
</tr> 
<?php 
$pagesize-20; 
if ($total«—S$pagesize) 1 
$pagecount-1; 
j 
if((Stotal?o$pagesize)!—0) ( 
S$pagecount-intval(Stotal/S$pagesize)-1; 


yelse{ 
$pagecount=$total/$pagesize; 


j 
if((S GET [page] =="") { 
$page=1; 


yelse{ 
$page=intval($ GET[page]); 


} 
$sql1=mysql query("select * from tb gonggao order by time desc limit ".($page- 
1)*Spagesize.",Spagesize ",$conn); 
while(Sinfol-mysql fetch array($sql1)) 
1 
?> 
<tr> 
«td height="20"><div align="left">-<?php echo $infol[title];?></div></td> 
«td height="20"><div align="center"><?php echo $infol[time];?></div></td> 
<td height="20"><div align="center"><a href=" gonggao.php?id=<?php echo $infol[id];?>"> 
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查看 </a></div></td> 
</tr> 


<?php 


?> 
<tr> 

<td height="20" colspan="3"> &nbsp; 

<div align="right"> 本 站 共有 公告 &nbsp; 
<?php 
echo Stotal; 
人 
&nbsp; 条 &nbsp; 每 页 显示 &nbsp;<?php echo $pagesize;?»&nbsp; 4& &nbsp; 第 &nbsp;<?php echo 
$page;?>&nbsp; 页 / 共 &nbsp;<?php echo $pagecount; ?>&nbsp; 页 

<?php 

if($page>=2) 

{ 


?> 


<a href="gonggaolist.php?page=1" title=" # H "><font face="webdings"> 9 </font></a> <a 


href="gonggaolist.php?id=<?php echo $id;?>&amp;page=<?php echo $page-1;?>" title=" Bij — Ji "><font 
face="webdings"> 7 </font></a> 
<?php 
j 
if(Spagecount«-4) ( 
for($i=1;$i<=$pagecount;$i++){ 
?> 
<a href-"gonggaolist.php?page-«?php echo $i;?>"><?php echo $i;?></a> 
<?php 
j 
jelse( 
for($i=1;$i<=4;$i++){ 
?> 
<a href=" gonggaolist.php?page=<?php echo $i;?>"><?php echo $i;?></a> 
<?php }?> 
<a href="gonggaolist.php?page=<?php echo $page-1;?>" title=" 后 一 页 "><font 
face="webdings"> 8 </font></a> «a href="gonggaolist.php?id=<?php echo $id;?>&amp;page=<?php echo 
$pagecount;?>" title=" € W "><font face="webdings"> : </font></a> 
<?php }?> 
</div></td> 
</tr> 
</table> 
<?php 
j 


?></td> 
</tr> 


</table> 
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该 页 面 的 技术 难点 在 于 新 闻 标 题 的 分 页 显示 功能 ， 在 显示 的 标题 太 多 时 一 般 都 要 使 用 


上 述 的 分 页 显示 功能 实现 按 页 显示 记录 。 


12.3 显示 详细 内 容 


具体 信息 详细 显示 页 面 ， 通 常 包 括 显 示 所 显示 信息 的 标题 、 时 间 以 及 出 处 ， 制 作 的 具 


体 效果 如 图 7-11 所 示 。 
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图 7-11 PEAT H 


面 的 编写 程序 部 分 如 下 : 


«table width-"530" border="0" align="center" cellpadding-"0" cellspacing="1"> 
<?php 

$id=$_GET[id]; 
$sql=mysql query("select * from tb_gonggao where id=".$id."",$conn); 
$info=mysql_fetch_array($sql); 

include("function.php"); 

?> 

<tr> 
<td width="24" height="25" bgcolor="#FFFFFF"><div align="center"></div></td> 
<td width="315" bgcolor="#FFFFFF"><div align="center"> A 4; E 题 : <?php echo 


unhtml($infoftitle]);?></div></td> 


<td width="66" bgcolor="#FFFFFF"><div align="center"> fW] [RH]: </div></td> 

<td width="120" bgcolor="#FFFFFF"><div align="left"><?php echo $info[time];?></div></td> 

</tr> 

«tr» 

<td height-"125" bgcolor-" ZFFFFFF"--div align="center"></div></td> 

«td height-"125" colspan-"3" bgcolor="#FFFFFF"><div align="left"><?php echo unhtml(Sinfo 


[content ]);?» «/div»«/td» 


</tr> 


</table> 


通过 上 述 


7.3 | 产品 的 定购 功能 
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两 个 页 面 的 设计 ， 品 牌 新 闻 系 统 的 前 台 部 分 即 开发 完成 。 


购物 车 系统 主要 由 网 上 产品 定购 与 后 台 结 算 这 两 个 功能 组 成 ， 实 例 中 与 购物 车 相关 的 页 
面 主要 有 产品 介绍 页 面 ( 只 有 一 个 “购买 ”的 功能 按钮 ， 主 要 包括 index.php、 用 于 显示 产品 


详细 信息 的 页 面 lookinfo.php)、“ 最 新 婚纱 ”频道 页 面 shownewprphp、“ 推 荐 品牌 ”频道 页 面 
showtuijian.php、“ 热 门 品 牌 ” 频 道 页 面 showhot.php、“ 婚 纱 分 类 ”频道 页 面 showfenlei.php 及 
产品 搜索 结果 页 面 serchorder.php， 下 面 分 别 介绍 除了 首页 以 外 的 页 面 实 现 的 功能 。 
7.3.1 产品 介绍 页 面 

产品 介绍 页 面 lookinfo.php 是 用 来 显示 商品 细节 的 页 面 。 细 节 页 面 要 能 显示 出 商品 所 有 
的 详细 信息 ， 包 括 商品 价格 、 商 品 产地 、 商 品 单位 及 商品 图 片 等 ， 同 时 要 显示 是 否 还 有 产 
品 、 放 入 购物 车 等 功能 ， 实 例 还 加 入 了 商品 评价 功能 。 

1) 由 所 需要 建立 的 功能 出 发 ， 可 以 建立 图 7-12 所 示 的 动态 页 面 。 在 页 面 中 ，PHP 代 
码 图 标 代表 此 处 加 入 了 动态 命令 以 实现 该 功能 。 


3 C: \Apache\htdocs\shop\lookinfo. php (XHTML) 到 


EE top.php conn php left menu.php bottom. php 


Ea. 


F 
: Bd Pw 
< 一 1. 一 — il 图 | 
[xk] Q Io  v| m (wj IN] 776 x 454v 1K/1 秒 | 简体 中 文 (B2312) s 
>z A h 
图 7-12 产品 介绍 页 面 


其 中 购物 车 的 订购 代码 进行 了 加 粗 说 明 : 


2) 该 模块 的 程序 分 析 如 下 ， 


<?php 

$sql=mysql_query("select * from tb shangpin where id=".$_GET[id]."",$conn); 
$info-mysql fetch object($sql); 

?> 

<tr> 

<td width="89" height="80" rowspan-"4" align="center" valign="middle" bgcolor="#FFFFFF"><div 
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align="center"> 
<?php 
if(Sinfo-^tupian--"")( 
echo " 暂 无 图 片 "; 

} 

else 
{ 


2» 
«a href="<?php echo $info->tupian;?>" target-" blank"><img src="<?php echo $info->tupian;?>" 
alt=" 查 看 大 图 " width="80" height-"80" border="0"></a> 
<?php 
j 
?> 
</div></td> 
«td width="92" height-"20" align="left" bgcolor="#FFFFFF"><div align="center"> Ej ii 44 $K : 
</div></td> 
<td width="134" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->mingcheng;?> 
</div></td> 
<td width="100" bgcolor="#FFFFFF"><div align="center"> A ii IFI]: </div></td> 
<td width="129" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->addtime;?></div> 
</td> 
</tr> 
<tr> 
«td height="20" align="left" bgcolor="#FFFFFF"><div align="center" >S Ry: </div></td> 
<td width="134" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo S$info->huiyuanjia;?> 
</div></td> 
<td width="100" bgcolor="#FFFFFF"><div align="center"> M]: </div></td> 
<td width="129" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->shichangjia;?> 
</div></td> 
</tr> 
<tr> 
«td height="20" align="left" bgcolor="#FFFFFF"><div align="center"> 等 级 : </div></td> 
«td width="134" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->dengji;?></div></td> 
«td width="100" bgcolor="#FFFFFF"><div align="center"> 品 牌 ， </div></td> 
«td width="129" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->pinpai;?></div></td> 
</tr> 
<tr> 
«td height="20" align="left" bgcolor="#FFFFFF"><div align="center">! 5; </div></td> 
<td width="134" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info- 
>xinghao;?></div></td> 
«td width="100" bgcolor="#FFFFFF"><div align="center"> 数 量 : </div></td> 
«td width="129" bgcolor="#FFFFFF"><div align="left">&nbsp;<?php echo $info->shuliang;?></div> 
</td> 
</tr> 
<tr> 
«td width="89" height="69" bgcolor=" #FFFFFF"><div align="center"> fj 品 简 介 : </div></td> 
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«td height-"69" colspan="4" bgcolor-"4FFFFFF" valign-"top"»«div align="left"><br> 

&nbsp;&nbsp;&nbsp;&nbsp;-?php echo $info->jianjie;?></div></td> 

</tr> 

</table></td> 

</tr> 

</table> 

<table width="530" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td><div align="right"><a href="addgouwuche.php?id=<?php echo Sinfo->id;?>"> 放 入 购物 车 
</a>&nbsp;&nbsp;</div></td> 

// 单 击 “ 放 入 购物 车 ”传递 产品 的 id 号 并 到 addgouwuche.php 去 结算 

</tr> 

</table> 

<?php 

if($_SESSION[username]!="") 

{ 


1> 


Ln" 


«form name-"forml" method="post" action 
"return chkinput(this)" 
«table width-"530" border-"0" align="center" cellpadding-"0" cellspacing-"0"— 
«tr» 
«td height-"25" bgcolor="#EEEEEE"><div align="center" style="color: #FFFFFF"> 
<div align="left">&nbsp;&nbsp;<span style="color: #000000"> 发 表 评 论 </span></div> 
</div></td> 
</tr> 
<tr> 
<td height="150" bgcolor="#999999"><table width="530" border="0" align="center" cellpadding="0" 
cellspacing="1"> 


savepj.php?id=<?php echo $info->id;?>" onSubmit= 


LM 


«script language-"javascript" 


function chkinput(form) 


1 
if(form.title.value--"") 
1 
alert(" 请 输入 评论 主题 !"); 
form.title.select(); 
return(false); 
j 
if(form.content.value--"") 
1 


alert(" 请 输入 评论 内 容 !); 
form.content.select(); 


return(false); 
} 


return(true); 


</script> 
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<tr> 
«td width="80" height="25" bgcolor="#FFFFFF"><div align="center"> 评 论 主题 : </div></td> 
<td width="467" bgcolor="#FFFFFF"><div align="left"> 
<input type="text" name="title" size="30" class-"inputcss" style="background-color:#e8f4ff " onMouse 


Over="this.style.backgroundColor='#f{ffff" onMouseOut="this.style.backgroundColor='#e8f4ff "> 


</div></td> 

</tr> 

<tr> 

«td height="125" bgcolor="#FFFFFF"><div align="center"> FW WNR: </div></td> 
«td height="125" bgcolor=" #FFFFFF"><div align="left"> 


LM 


«textarea name-"content" cols-"70" rows-"10" class-"inputcss" style-"background-color:Ze8fA4ff " 


onMouseOver-"this.style.backgroundColor- Z£ffffff" 
onMouseOut-"this.style.backgroundColor- Zte8fAff"—/textarea^ 


</div></td> 

</tr> 

</table></td> 
</tr> 

</table> 
<table width="530" height="25" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td><div align="center"> 

«input name-"submit2" type="submit" class="buttoncss" value=" 发 表 "> 

&nbsp;&nbsp;&nbsp;ca href-"showpl.php?id-«?php echo $ GET[id];?2"» fr Æ iZ 


COEPI 
向 mp vi 


N 


论 </a> 


</div></td> 
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</tr> 
</table> 
</form> 
<?php 

j 


?> 


3) 在 上 面 的 代码 中 ， 产 品 的 展示 只 是 数据 的 查询 并 显示 的 功能 ， 核 心 在 于 “发 表 


I 


在 单 击 “ 发 表 ” 按 钮 时 是 传递 到 savepjphp 页 面 进行 保存 评价 的 ， 甚 页面 的 代 


<?php 

include("conn/conn.php"); 

$title=$ POST[title]; 

$content-$ POST[content]; 

$spid-$ GET[id]; 

$time-date("Y -m-j"); 

session start(); 

$sql=mysql query("select * from tb user where name="".$ SESSION[username]. """,$conn); 
Sinfo-mysql fetch array($sql); 

$userid-$info[id]; 

mysql query('insert into tb pingjia (userid,spid,title,contenttime) values ('$userid', '$spid','$title', 


'"$content','Stime") ",Sconn); 
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echo "<script>alert(' 评 论 发 表 成 功 !");history.back(;</script>"; 
?> 


7.3.2 “最 新 婚纱 ”频道 


“最 新 婚纱 ”频道 页 面 为 单 击 导航 条 中 的 “最 新 婚纱 ”链接 到 的 页 面 shownewprphp， 
主要 是 显示 数据 库 中 最 新 上 架 的 商品 。 
1) 首先 完成 静态 页 面 的 设计 ， 该 页 面 的 效果 如 图 7-13 所 示 。 


be | C:\Apache\htdocs\shop\showmnewpr php. (YHTXL) 


图 
J ai 
T6 x 454v 1K / 1 秒 | 简体 中 文 562512 — 


图 7-13 “最 新 婚纱 ”频道 页 面 的 效果 


2) 代码 主要 核心 部 分 如 下 所 示 : 


«table width-"550" height="70" border="0" align="center" cellpadding="0" cellspacing="0"> 
<?php 
$sql=mysql_query("select * from tb_shangpin order by addtime desc limit 0,4",$conn); 
/从 产品 表 中 调 出 最 新 加 入 的 4 条 产品 信息 
Sinfo-mysql fetch array($sql); 
if(Sinfo—-false)( 
echo "本 站 暂 无 最 新 产品 !; 
} 
else{ 
do{ 


?> 


<tr> 
<td width="89"rowspan="6"><div align="center"> 
<?php 

if($info[tupian]=="") f 
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echo " 暂 无 图 片 1"; 
} 
else{ 
?> 
«a href="lookinfo.php?id=<?php echo $infofid];?>"><img border-"0" src="<?php echo $info[tupian];?>" 
width="80" height="80"></a> 
<?php 
} 
?> 
</div></td> 
«td width="93" height="20"><div align="center" style="color: #000000"> 商 品名 称 : </div></td> 
«td colspan="5"><div align="left"><a href="lookinfo.php?id=<?php echo $info[id];?>"><?php echo 
$info[mingcheng];?></a></div></td> 
</tr> 
«tr» 
«td width-"93" height-"20"»«div align="center" style="color: #000000"> 商 品 品牌 ， </div></td> 
«td width="101" height="20"><div align-"left"7«?php echo $info[pinpai];?></div></td> 
«td width="62"><div align="center" style="color: #000000"> 商 品 型 号 : </div></td> 
«td colspan="3"><div align-"left"7«?php echo $info[xinghao];?></div></td> 
</tr> 
<tr> 
<td width="93" height="20"><div align="center" style="color: #000000"> 商 品 简 介 : </div></td> 
«td height-"20" colspan-"5"7«div align="left"><?php echo $infofjianjie];?></div></td> 
</tr> 
<tr> 
«td height="20"><div align="center" style="color: #000000"> Eli H }¥H: </div></td> 
«td height="20"><div align="left"><?php echo $info[addtime];?></div></td> 
«td height="20"><div align="center" style="color: #000000"> 剩 余数 量 : </div></td> 
«td width="69" height="20"><div align="left"><?php echo $info[shuliang];?></div></td> 
«td width="63"><div align="center" style="color: #000000"> 商 品 等 级 : </div></td> 
«td width="73"><div align="left"><?php echo $info[dengji];?></div></td> 
</tr> 
«tr» 
«td height-"20"7«div align="center" style="color: #000000"> 商 场 价 : </div></td> 
«td height="20"><div align="left"><?php echo $info[shichangjia];?> 元 </div></td> 
«td height="20"><div align="center" style="color: #000000"> 会 员 价 : </div></td> 
«td height="20"><div align="left"><?php echo $info[huiyuanjia];?> 元 </div></td> 
«td height="20"><div align="center" style="color: #000000"> 折 扣 : </div></td> 
«td height="20"><div align="left"><?php echo ((gceil((Sinfo[huiyuanjia]/$info [shichangjia])*100)). 
"%";?></div></td> 
</tr> 
<tr> 
<td height="20"  colspan-"6" width="461"><div align="center">&nbsp;&nbsp;&nbsp;&nbsp;<a 
href="addgouwuche.php?id=<?php echo $infofid];?>"><img src-"images/bl.gif" width="50" height="15" 
border="0" style=" cursor:hand"></a></div></td> 
</tr> 
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«tr» 
«td height-"10" colspan-"7" background-"images/linel.gif"7«/td- 
</tr> 
<?php 
Twhile(Sinfo-mysql fetch array($sql)); 
} 


)?» 


</table> 
1.3.8 “推荐 品牌 ”频道 


“推荐 品牌 ”频道 页 面 为 单 击 导 航 条 中 的 “推荐 品牌 ”链接 到 的 页 面 showtuijian.php， 
主要 是 显示 数据 库 中 推荐 的 商品 。 
1) 首先 完成 静态 页 面 的 设计 ， 该 页 面 的 效果 如 图 7-14 所 示 。 


雷 c:wpachevhtaocs\shcp\showteiia pho (xm 


图 7-14 “推荐 品牌 ”频道 页 面 


2)“ 推 荐 品牌 ”频道 页 面 的 功能 和 “最 新 婚纱 ”频道 页 面 基本 上 是 一 样 的， 不 同 的 地 
方 在 于 推荐 时 从 数据 库 查 询 的 代码 不 一 样 ， 主 要 核心 不 同 部 分 如 下 : 


<?php 


$sql=mysql_query("select count(*) as total from tb_shangpin where tuijian=1 ",$conn); 
// 从 tb. shangpin 数据 表 中 查询 出 tuijian=1 的 商品 
$info=mysql] fetch array($sql); 
S$total-Sinfo[total]; 
if($total==0) 
{ 
echo "本 站 暂 无 推荐 产品 !"; 
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?> 
7.3.4 “热门 品牌 ”频道 


“热门 品牌 ”频道 页 面 为 单 击 导 航 条 中 的 “热门 品牌 ”链接 到 的 页 面 showhot.php， 主 要 
是 显示 数据 库 中 热门 的 商品 。 
1) 首先 完成 静态 页 面 的 设计 ， 该 页 面 的 效果 如 图 7-15 所 示 。 


A c: wpachevhtaoes\shepvshoshot.php OUTIL) 


AA | 产品 分 类 D 用 户 中 心 | 订单 查询 | 购物 车 | 


图 7-15 “热门 品牌 ”频道 页 面 


2)“ 热 门 品牌 ”频道 页 面 的 功能 主要 核心 不 同 部 分 如 下 : 


<?php 
$sql=mysql_query("select * from tb_shangpin order by cishu desc limit 0,10",$conn); 
I| tb. shangpin 数据 表 中 查询 出 10 条 的 热门 品牌 
$info=mysql fetch array($sql); 
if(Sinfo—-false) 
{ 
echo "本 站 暂 无 热门 产品 "; 
} 
else 
{ 
do 


{ 


T 
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7.3.5 “婚纱 分 类 ”频道 

“婚纱 分 类 ”频道 页 面 为 单 击 导 航 条 中 的 “热门 品牌 ”链接 到 的 页 面 showfenleiphp， 按 
商品 的 分 类 显示 不 同 的 商品 。 

1) 首先 完成 静态 页 面 的 设计 ， 该 页 面 的 效果 如 图 7-16 所 示 。 


A C: pachevhtaoesvshop\showtenlei.php (XETIL) 


RUN. . a 
: | uj. 

RIEA |ox v) € (N| NN| 777 x 429v 1 K / E EET (682312). E 

图 7-16 “婚纱 分 类 ”频道 页 面 

2)“ 婚 纱 分 类 ”频道 页 面 的 功能 主要 核心 不 同 部 分 如 下 : 


<?php 


if($_GET[id]=="") 
{ 
$sql=mysql query("select * from tb type order by id desc limit 0,1",$conn); 
1/ 从 tb. type 数据 表 中 查询 出 所 有 的 商品 分 类 
S$info=mysql] fetch array($sql); 
$id-$info[id]; 
} 
else 
$id-$ GET[id]; 
} 
$sqll=mysql query("select * from tb type where id=".$id. 
Sinfol-mysql fetch array($sql1); 


,$conn); 


$sgl-mysql query('"select count(*) as total from tb shangpin where typeid-". Sid." order by 
addtime desc ",$conn); 

Sinfo-mysql fetch array($sql); 

S$total-Sinfo[total]; 
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if(Stotal--0) 


1 
echo "<div align='center> 本 站 暂 无 该 类 产品 !</div>"; 


} 


else 


1 


2» 


1.3.0 ”产品 搜索 结果 

一 般 的 大 型 网 站 都 存在 搜索 功能 ， 在 首页 中 要 设置 产品 搜索 功能 。 通 过 输入 要 搜索 的 产 
品名 ， 单 击 “ 搜 索 ” 按 钮 后 ， 要 打开 的 页 面 就 是 这 个 产品 的 搜索 结果 页 面 serchorder.php. 

1) 由 上 面 的 功能 分 析出 发 ， 设 计 好 的 商品 搜索 结果 页 面 如 图 7-17 所 示 。 


ache\htdocs\shop\serchorder. php (XHTML) 


ee 
co BS RRSOI  ENHU 


ER Care nere KLAAI MOTE 


s 
-— | 加 | 
o 776 x 454v 1 X71T 黎 | 简体 中 文 (GB2312)] “| 


图 7-17 产品 搜索 结果 页 面 


2) 相关 的 程序 代码 如 下 : 


<?php 
$jdez-$ POST[jdcz]; 
$name-$ POST[name]; 
$mh-$ POST[mh]; 
$dx=$ POST[dx]; 
if(Sdx--"1")( 
$dx=">"; 

j 

elseif($dx—-"-1")( 

$dx="<"; 
} 
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else{ 
$dx="="; 
} 
Sig-intval$ POST[jg]); 
$lb=$ POST[lb]; 
if($jdez!=""){ 
$sql=mysql _query("select * from tb shangpin where mingcheng like '%".$name."%' order by addtime 
desc",$conn);// 按 分 类 名 称 查询 tb. shangpin 数据 表 
} 
else 
{ 
if($mh=="1"){ 
$sql=mysql_query("select * from tb shangpin where huiyuanjia $dx".$jg." and typeid=".$lb." and 


m 


mingcheng like '%".$name."% 


j 
// 按 会 员 价 查询 tb. shangpin 数据 表 
else{ 


,$conn); 


$sql=mysql_query("select * from tb shangpin where huiyuanjia $dx".$jg." and typeid-".$Ib." and 
mingcheng = "".$name.""",$conn); 
} 
} 
$info=mysql fetch array($sq]); 
if($info==false){ 
echo "<script language='javascript'>alert(' 本 站 暂 无 类 似 产 品 !");history.go(-1);</script>"; 
} 
else{ 
?> 
«table width="530" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
«tr bgcolor="#FOFOFO"> 
<td width="92" height="25"><div align="center" style="color: #990000"> 名 称 </div></td> 
«td width="83"><div align="center" style="color: #990000"> 品 牌 </div></td> 
«td width="62"><div align="center" style="color: #990000"> 市 场 价 </div></td> 
«td width="62"><div align="center" style="color: #990000"> 会 员 价 </div></td> 
<td width="161"><div align="center" style="color: #990000"> 上 市 时 间 </div></td> 
«td width="48"><div align="center" style="color: #FFFFFF"><span class="stylel"> </span> </div> 
</td> 
«td width="42"><div align="center" style="color: 4990000" — E E«/div»«/td» 
</tr> 
<?php 
do{ 
?> 
<tr bgcolor="#FFFFFF"> 
«td height="25"><div align="center"><?php echo $info[mingcheng];?></div></td> 
«td height="25"><div align="center"><?php echo $info[pinpai];?></div></td> 
<td height="25"><div align="center"><?php echo $info[shichangjia];?></div></td> 
«td height="25"><div align="center"><?php echo $info[huiyuanjia];?></div></td> 
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«td height="25"><div align="center"><?php echo $info[addtime];?></div></td> 
<td height="25"><div align="center"><a href="lookinfo.php?id=<?php echo S$info[id];?>"> 查看 
</a></div></td> 
«td height="25"><div align="center"><a href="addgouwuche.php?id=<?php echo $info[id];?>"> 购 物 
</a></div></td> 
</tr> 
<?php 
}while($info=mysql fetch_array($sq])); 
j 


?> 
</table></td> 
</tr> 
</table> 
到 这 里 ， 就 完成 了 商品 相关 动态 页 面 的 设计 ， 可 以 实现 网 站 产品 的 前 台 展 示 和 订购 
功能 。 


7.4 | 网 站 的 购物 车 功能 


站 的 核心 技术 ， 就 在 于 产品 的 展示 与 网 上 订购 、 结 算 功 能 ， 在 网 站 建设 中 这 块 的 知 
识 统称 为 “购物 车 系统 ”。 购 物 车 最 实用 的 就 是 进行 产品 结算 ， 通 过 这 个 功能 ， 用 户 在 选择 
了 自己 喜欢 的 产品 后 ， 可 以 通过 网 站 确认 所 需要 的 产品 ， 输 入 联系 方式 ， 提 交 后 写 入 数据 
车 ， 方 便 网 站 管理 者 进行 售后 服务 ， 这 也 就 是 购物 车 的 主要 功能 。 
1.41 放 入 购物 车 

addgouwuche.php 页 面 在 前 面 的 代码 中 经 常 应 用 到 ， 就 是 单 击 “ 购 买 ” 图 标 按钮 后 ， 
需要 调用 的 页 面 ， 主 要 用 来 实现 统计 订单 数量 的 功能 。 该 页 面 完 全 是 PHP 代码 ， 如 图 7-18 
所 示 。 

代码 如 下 : 


<?php 
session start(); 


可 


m 


include("conn/conn.php"); 
ifíS SESSION[username]--") ( 

echo "<script>alert(' 请 先 登录 后 购物 !);history.backO;</script>"; 

exit; 

} 

/判断 是 否 已 经 登录 
S$id-strval($ GET[id]); 
$sql=mysql query("select * from tb shangpin where id=".$id."",$conn); 


Sinfo-mysql fetch array($sql); 
if(Sinfo[shuliang]«-0) ( 
echo "«script»alert( i fiii m OA 56); history.back();«/script»"; 


exit; 
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} 
/判断 是 否 还 有 产品 


$array=explode("@",$_ SESSION[producelist]); 
for($i=0;$i<count($array)-1;$i++){ 
if($array[$i]==$id){ 
echo "<script>alert(' 该 商品 已 经 在 您 的 购物 车 中 !");history.back(;</script>"; 
/判断 是 否 重复 购买 


exit; 


j 
$ SESSION[producelist]-$ SESSION[producelist].$id."(c2"; 


$ SESSION[quatity]-$ SESSION[quatity]." 1"; 
header("location: gouwuche.php"); 
/实现 统计 累加 的 功能 并 进行 转向 


2» 


Dw xo) deo) EEV MAD Pw 格式 0) dei VA DID Wb NEN O% Ar Rim. 
addgoumuche php X 

CID cung 

| CR jme pe AR) WU. NM RELC RT ——— — 


roducelist].$id."€" ; 
ty]. "ie 


1K/19 Nei 


«894 bEizusciO[| — 7| 
“on BO 


CEE )| ef 


图 7-18  addgouwuche.php 页 面 的 设计 


说 明 : 

session 在 PHP 编程 技术 中 是 非常 重要 的 子 数 。 由 于 网 页 是 一 种 无 状态 的 链接 程序 ， 因 
此 无 法 得 知 用 户 的 浏览 状态 ， 必 须 通 过 session 变量 记录 用 户 的 有 关 信 息 ， 以 供用 户 再 次 以 
此 身份 对 服务 器 提供 要 求 时 作 确 认 。 


14.2 ”清空 购物 车 


在 购物 车 订购 过 程 中 通过 单 击 “ 删 除 ” 和 “清空 购物 车 ”文字 链接 ， 能 够 调用 
removegwc.php 页 面 (图 7-19)， 通 过 里 面 的 命令 清空 购物 车 中 的 数据 统计 。 
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Im 


session start(): 
fide? GET[id): 
farraysp*explode("0",$ SESSION[producelist]); 
$arraysl-explode("ü",$ SESSION[quatity]]; 
tor ($170; $1<count (farraysp);$1++) ( 
if(farraysp[ti]77$1id) 
f$arraysp(i1]74""; 
$arraysi[$1]7""; 
) 
) 

$ SESSION[producelist]*implode("8",$arraysp); 
$ SESSION[quatity) "implode ("8", $arraysl); 
header ("location:gouwuche.php"): 
?> 


图 7-19  removegwc.php 1 M 


清除 订单 的 代码 如 下 : 


<?php 
session start(); 
$id-$ GET[id]; 
Sarraysp-explode("(à",$ SESSION[producelist]); 
Sarraysl-explode("(à",$ SESSION[quatity ]); 
for($i-0;Si«count($arraysp);$i4-—)( 
if(Sarraysp[$i]--$id) ( 
$arraysp[$i]=""; 
$arraysl[$i]=""; 
j 
j 
$ SESSION[producelist]-implode("(Q)",Sarraysp); 
$ SESSION[quatity]-implode(" (Q)",Sarraysl); 
header("location:gouwuche.php"); 
?> 


通过 上 面 的 命令 可 以 清空 购物 车 里 的 订单 ， 并 返回 gouwuche.php 页 面 重新 进行 订购 。 
7.4.3” 收 货 人 信息 


用 户 登 录 后 选择 商品 放 入 购物 车 ， 单 击 首页 上 的 “去 收银 台 ” 文 字 链 接 ， 则 打开 订单 
用 户 信 息 确认 页 面 gouwusuan.php， 在 该 页 面 中 需要 设置 收 货 人 的 详细 信息 ， 如 图 7-20 
所 示 。 
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a C:\Apache\htdocsishop\gouwasuan. php (YHTXL) 


top.Php left menu php bottom. php 了 
5a 


14.4 生成 订单 功能 


图 7-20 ” 收 货 人 信息 页 面 


单 击 “ 提 交 订 单 ” 按 钮 后 ， 则 调用 savedd.php 页 面 ， 该 页 面 的 功 


库 后 返回 gouwusuan.php 页 面 ， 


<?php 
session start(); 
include("conn/conn.php"); 


H 


AN 


体 代码 如 下 : 


能 是 把 订单 写 入 数据 


$sql=mysql query("select * from tb user where name="".$ SESSION[usernamel]."",$conn); 


$info=mysql fetch array($sql); 
$dingdanhao-date("Y mjHis").Sinfo[id]; 
$spc-$ SESSION[producelist]; 


$slc= $ SESSION[quatity]; 


$shouhuoren-$ POST[name2]; 


$sex-$ POST[sex]; 
$dizhi-$ POST[dz]; 
Syoubian-$ POST[yb]; 
$tel-$ POST[tel]; 
$email-$ POST[email]; 
$shff-$ POST[shff]; 
$zfff=$ POST[zfff]; 
if(trim($ POST[ly])--")( 


"m. 


$leaveword-""; 


j 


else{ 


Sleaveword-$ POST[ly]; 


j 


$xiadanren-$ SESSION[username]; 
Stime-date("Y —m-j H:i:s"); 
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$zt=" 未 作 任何 处 理 "; 

$total-$ SESSION[total]; 

mysql query("insert into tb dingdan(dingdanhao,spc,slc,shouhuoren,sex,dizhi, youbian,tel,email,shff, 
zfffeaveword,time,xiadanren,zttotal) values — ('$dingdanhao','Sspc','Sslc, ^ '$shouhuoren','$sex',Sdizhi', 
'$Syoubian','Stel','Semail','Sshff,Szfff ,'Sleaveword','Stime','$xiadanren','$zt','Stotal")",$conn); 

header("location:gouwusuan.php?dingdanhao-$dingdanhao"); 

?> 


14. ”订单 查询 功能 


用 户 在 购物 的 时 候 ， 还 需要 知道 自己 在 近 段 时 间 一 共 购 买 了 多 少 商品 。 单 击 导航 条 上 
的 “订单 查询 ” 打开 查询 输入 的 页 面 finddd.php， 在 查询 文本 域 中 输入 客户 的 订单 编号 或 
下 订单 人 姓名 ， 都 可 以 查 到 订单 的 处 理 情况 ， 方 便 与 网 站 管理 者 进行 沟通 。 订 单 查询 功能 和 
首页 上 的 商品 搜索 功能 的 设计 方法 是 一 样 的 ， 需 要 在 输入 的 查询 页 面 设置 好 链接 库 的 链接 ， 
设置 查询 输入 文本 域 ， 建 立 查 询 命令 ， 具 体 的 设计 分 析 同 前 面 的 搜索 功能 模块 设计 ， 完 成 后 
的 效果 如 图 7-21 所 示 。 


M ci apachevhtsocsvshopvtinddd pho (ETL) 


图 7-21 订单 查询 页 面 
整个 购物 系统 网 站 前 台 的 动态 功能 的 核心 部 分 都 已 经 介绍 到 ， 其 他 还 有 些小 功能 页 面 


这 里 就 不 做 具体 的 介绍 。 用 户 在 使 用 时 可 以 根据 自己 的 需求 对 网 站 进行 一 定 的 完善 和 更 改 ， 
以 达到 自己 的 使 用 要 求 。 
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laxa 


zm 


83: 


翡 滁 电子 商城 前 台 主 要 实 


留言 


功能 的 功能 开发 。 但 
网 站 所 有 者 提供 一 个 功能 齐全 


的 后 台 管理 功能 。 


的 发 布 、 


会 员 PE 主 册 信 息 的 管 
k 


、 回 复 留言 、 商 癌 维 


莫 举 电子 商城 后 台 的 一 占 


发 。 


本 章 重 点 介绍 如 下 知识 : 


(7 电子 商城 系统 后 台 规划 


电子 商城 后 


现 了 网 站 针对 会 员 的 所 有 功能 ， 包 括 会 员 注册 、 
个 完善 的 网 上 购物 系统 并 不 只 


台 功 能 开发 


购物 车 以 及 


提供 给 用 户 一 些 使 用 功能 ， 还 要 给 


它 ) 后 台 商 品 管理 功能 
(7 后 台 用 户 管理 功能 
© 后 台 


订单 管理 功能 
(7 后 台 信 息 "S E 管理 功能 


84 | 电子 商城 系统 后 百 台 规划 


技术 ， 相 当 于 一 


电子 商城 的 后 台 管 理 系统 是 整个 网 站 建设 的 难点 
个 独立 运行 的 系统 程序 。 实 例 的 后 台 主 要 要 实现 “商品 管理 “月 


[11 W Fü 


管理 ”以 及 “信息 


8.1.1 


样 需要 建立 一 些 常 用 的 文件 夹 ， 如 用 于 链接 数据 库 的 文件 
3€ css， 用 于 放置 图 片 的 文件 夹 images 以 及 用 于 放置 上 传 的 产品 图 
设计 完成 的 整体 文件 


X 件 


upimages, 


规划 后 台 页 面 
本 实例 将 所 有 


s 
zn 


E, 


它 包 括 了 几乎 所 有 的 常用 PHP 处 理 


管理 "4 大 功能 
个 后 台 的 需求 整体 规划 ， 这 和 网 站 前 台 的 制作 方法 是 


模块 ， 在 进行 


该 网 站 后 台 总 共 由 42 


VINA 


要 设计 的 页 面 功能 分 析 如 | 
addgonggao.php: 增加 新 间 
addgoods.php: 增加 商品 信息 
品类 别 的 页 面 

增加 商品 公告 的 页 面 


addleibie.php: 增加 商 


admingonggao.php: 


夹 及 文件 如 图 
个 页 面 组 成 ， 从 开 


changeadmin.php: 管理 员 


发 的 难 易 程 度 


8-1 所 示 。 


网 站 所 有 者 登录 后 台 管 理 即 可 进行 新 闻 公 告 
护 以 及 进行 订单 的 处 理 等 。 本 章 主要 介绍 


户 管理 ” 


k 体 的 功能 开发 之 前 ， 首 先 要 进行 一 
一 样 的 。 


草 作 的 后 台 管 理 页 面 放 置 在 admin. 文件 夹 下 面 ， 和 单独 设计 一 个 网 站 一 
夹 conn， 用 于 放置 网 页 样式 表 的 
片 的 文件 夹 


上 说 并 不 比 前 台 的 开发 简单 。 


对 
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LFT RAD EEV KRA IAT) 帮助 00) 
Om- O-A Prr ox E 


2? C:\Apache\htdocs\shop\adain DER 
ar 


HED) [B C: \Apacheihtdoczishop\adain «B 转 到 
| a 


x^ AN | 修改 日 其 
文件 和 文件 卖 任务 EI 2012-4-30 15:43 


BBR— T WC XX 2012-4-30 15:42 


XMX 2012-4-30 10:24 

9 BT XM AGUSRI XXE 2012-4-29 12:59 
kg XA E PHP Seript 2011-6-27 9:07 
a PIP Seript 2011-6-27 9:19 
PIP Seript 2011-6-27 9:11 
PHP Script 2011-6-27 9:14 
PHP Seript 2011-6-27 9:17 
PHP Seript 2011-6-27 9:20 

PHP Seript 2001-11-18 14:04 

5 chkadain php PIP Script 2007-11-27 19:54 
default. php 2EB PHP Seript 2011-6-27 8:43 

S aeletesllip php PHP Seript 2001-11-18 14:04 

J PHP Seript 2007-11-18 14:04 

PIP Seript 2007-11-18 14:04 

PIP Seript 2007-11-18 14:04 

PHP Seript 2007-11-18 14:04 

PHP Seript 2007-11-18 14:04 

pingjia php PHP Seript 2007-11-18 14:04 

3 user. php PHP Seript 2001-11-18 14:04 

E dongji euer. php PHP Seript 2007-11-18 14:04 
Eedi tgonggao. php PHP Seript 2011-6-27 9:22 
b editgoods. php PHP Script 2011-6-27 9:22 


图 8-1 网 站 后 台 文 件 结构 


changegoods.php: 商品 信息 变更 页 面 
changeleaveword.php: 会 员 留 言 变 更 页 面 
chkadmin.php: 管理 员 登 录 验 证 页 面 
conn/conn.php: 数据 库 链 接 文件 页 面 
default.php: 后 台 登 录 后 的 首页 
deleted.php: 删除 订单 的 页 面 
deletefxhw.php: 删除 商品 信息 页 面 
deletegonggao.php: 删除 公告 信息 页 面 
deletelb.php: 删除 商品 大 类 页 面 
deleteleaveword.php: 删除 用 户 留言 页 面 
deletepingjia.php: 删除 商品 评论 页 面 
deleteuserphp: 删除 用 户 信息 页 面 
dongjieuserphp: 冻结 用 户 处 理 页 面 
editgonggao.php: 编辑 公告 内 容 页 面 
editgoods.php: 编辑 商品 信息 页 面 
editleaveword.php: 编辑 用 户 留言 页 面 
editpinglun.php: 编辑 用 户 评论 页 面 
edituserphp: 编辑 用 户 信息 页 面 
finddd.php: 订单 查询 页 面 
function.php: 调用 的 常用 函数 
index.php: 后 台 用 户 登 录 

left.php: 展开 式 树 状 导航 条 
lookdd.php: 查看 订单 页 面 
lookleaveword.php: 查看 用 户 留言 页 面 
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lookpinglun.php: 查看 用 户 评论 页 面 
lookuserinfo.php: 查看 用 户 信息 页 对 
orddd.php: 执行 订单 页 对 
saveaddleibie.php: 保存 新 增 商 品 大 类 页 面 
savechangeadmin.php: 保存 用 户 信息 变更 页 面 
Savechangegoods.php: 保存 经 修改 商品 信息 
saveeditgonggao.php: 保存 经 修改 公告 内 容 
savenewgonggao.php: 保存 新 增 公 告 信 息 
savenewgoods.php: 保存 新 增 商品 信息 
saveorderphp: 保存 执行 订单 页 本 
showdd.php: 打印 订单 的 功能 页 面 
showleibie.php: 商品 大 类 显示 页 面 
top.php: 后 台 管理 的 顶部 文件 


812 ”登录 后 台 管理 


后 台 的 功能 开发 和 网 站 前 台 的 功能 开发 并 不 一 样 ， 前 台 除 了 功能 的 需求 之 外 ， 还 讲究 
网 页 的 布局 即 网 站 的 美工 设计 ， 而 后 台 的 开发 主要 重视 功能 的 需求 开发 ， 网 页 美工 可 以 放 到 
其 次 。 本 小 节 介 绍 一 下 网 站 后 台 从 登录 到 可 实现 的 管理 具体 有 哪些 流程 ， 以 方便 读者 更 容易 
地 了 解 后 面 小 节 所 介绍 的 内 容 。 

1) 网 站 拥有 者 需要 登录 后 台 进 行 网 上 购物 系统 的 管理 ， 由 于 涉及 很 多 商业 机 密 ， 所 以 
需要 设计 登录 用 户 确 认 页 面 ， 通 过 输入 惟一 的 用 户 名 和 密码 来 登录 后 台 进 行 管理 。 本 实例 中 
的 网 上 购物 系统 为 了 方便 使 用 ， 只 需要 在 用 户 系统 首页 中 直接 输入 用 户 名 “admin” 和 密码 
“admin” 即 可 ， 登 录 的 地 址 为 http://127.0.0.1/shop/admin/login.php， 如 图 8-2 所 示 。 


T 


T http://127. 0. 0. 1V/zhop/adain/login.php - Microsoft Internet Explorer 
XHP do) 查看 W) ZRN IAM Woo 
ost-O-a3a0|P»r zez | 全 -总 加 -不 

iito) a ttp: //12T. 0.0. 1/shep/admin/login php 


后 台 管 理 登 录 


图 8-2 后 台 管 理 登 录 页 下 


233 


[mirus 


— PHP+MySQL 电 商 网 站 设计 与 制作 


2) 单 击 “ 登 录 ” 按 钮 即 可 登录 后 台 


soft 


os 
文件 四) šv 


3) 单 击 左边 树 状 的 管理 菜单 中 的 “商品 管理 ”， 可 以 展开 “增加 商品 ”“ 修 改 商 品 ” 


“类 别管 


XO) SO) EEV (mo 


2012042305132946 


Internet Explorer 
ERN IRT) 500 
ose- O- NMO Pme tar o A-B-C 


SBS | HIIR 
mx | erz | «o [wewack 


的 首页 ， 并 进行 全 方位 的 管理 ， 如 图 8-3 所 示 。 


RISK 


FAFS 


E”“ 添 加 类 别 ” 这 4 个 功能 菜单 项 ， 
WEH, K| 8-4 所 示 的 是 增 力 


上 商品 页 面 。 


本 站 共有 订单 1 条 三 页 显示 20 条 第 1 届 / 共 1 页 1 | MASSI 


图 8-3 JrftBSE X JR 


工具 0) 帮助 00 


om- O- DAOP «ems e 2 总 加 -不 


通过 这 4 个 功能 主要 可 以 实现 商品 的 添加 、 修 


4) 如 果 想 实现 对 用 户 的 管 
理 ”“ 留 言 管理 ”以 及 “更 改 管理 
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图 8-4 增加 商品 页 面 


可 以 单 击 “用 户 管理 ”菜单 展开 项 ， 里 
”3 个 菜单 项 。 在 这 3 个 功能 中 ， 后 台 管 


e 
EP EA AME RT EJ 
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实现 对 注册 会 员 的 删除 ， 还 可 以 实现 对 相应 留言 的 删除 管理 


可 以 进行 变更 ， 图 8-5 所 示 的 是 后 台 管 理 者 变更 页 面 。 


AMO) WO) EV XOU) IAM EHW 
osr- oO- AAOS za e 8-a- € 


E, FE EAK admin 身份 也 


图 8-5 后 台 管 理 者 变更 页 面 


5) 订单 管理 是 购物 系统 后 台 管 理 的 核心 部 分 ， 单 击 “ 订 单 管理 ”展开 菜单 ， 可 以 看 到 


“编辑 订单 ”和 “查询 订单 ”两 个 功能 项 。 其中， 编辑 订单 就 是 实现 前 台 会 员 下 订单 后 与 管 


理 者 的 一 个 交互 ， 即 管理 者 需要 及 时 处 理 订单 并 进行 发 货 ， 
辑 订单 的 页 面 如 图 8-6 所 示 。 


X#E WO) GEO OUO IAT Woo 


才 可 以 实现 购物 交易 的 环节 ， 编 


Oost-o-a a |?" 办 WR o|2- 3 m € 


图 8-6 编辑 订单 页 面 


ELI E 


60 单 击 “ 信 息 管理 ”展开 菜单 ， 可 以 看 到 “管理 公告 ”“ 发 布 公告 ”以 及 “管理 评 
价 ”3 个 功能 项 ， 通 过 这 3 个 功能 能 够 实现 整个 网 站 的 即时 新 闻 发 布 、 公 告 修 改 以 及 商品 评 
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论 的 编辑 修改 功能 ， 图 8-7 所 示 的 是 管理 公告 页 面 。 


AMO) RAD GRECO WOO IAT boo 
osr- O- DAOP zmz e 3-. w-€ 


NEHERA OSEUAE 
MAKLER ARRERA 
FELLS ER PREME 
PERKENAL 98 

WE EFAN PLATNE 


本 让 共有 公司 5 条 SMEROM URIM: 


从 上 述 的 后 台 管 理 者 所 登录 的 各 功能 的 管理 页 面 来 看 ， 本 实例 的 后 台 管 理 功能 非常 流 
畅 ， 能 够 为 后 台 管 理 提供 非常 便利 的 网 站 管理 后 全 ， 这 也 是 需要 网 站 设计 者 与 管理 者 沟通 到 
位 ， 问 清 需求 后 才 可 以 做 到 的 。 

813 后台 管理 设计 


一 般 后 台 管 理 者 在 进行 后 台 管 理 时 都 是 需要 进行 身份 验证 的 ， 实 例 用 于 登录 的 页 面 如 
8-8 所 示 ， 在 单 击 “ 登 录 ” 按 钮 后 ， 判 断后 台 登 录 管 理 身 份 的 确认 动态 文件 为 chkadmin.php。 


" 
TB c: wpaehevhtaocs\shopvaaninlogin php -0x 


EBD font. css 


"he q joos ~|) m m BNH| 05x 45v 1 K/ 1 $ prveqeem 


图 8-8 后台 管理 登录 静态 效果 
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1) 该 页 面 制作 也 比较 简单 ， 主 要 的 功能 代码 如 下 : 


LM 


javascript" 


«script language 

function chkinput(form)( 
if(form.name.value--"")( 

alert(" 请 输入 用 户 名 !"); 
form.name.select(); 
return(false); 

j 

if(form.pwd.value--"")1 
alert(" 请 输入 用 户 密码 !"); 
form.pwd.select(); 
return(false); 

j 

return(true); 
j 

// 单 击 登 录 按钮 进行 表单 的 验证 

</script> 


«form name="form1" method="post" action="chkadmin.php" onSubmit="return chkinput(this)"> 
// 通 过 验证 后 转 到 chkadmin.php 进行 判断 


2) chkadmin.php 是 判断 管理 者 身份 是 否 正确 的 页 面 ， 使 用 PHP 编写 的 程序 如 下 : 


<?php 
class chkinput{ 
var $name; 
var $pwd; 
function chkinput($x,$y) 
1 
Sthis-^name-$x; 
Sthis-»pwd-$y; 
} 
function checkinput() 
{ 
include("conn/conn.php"); 
$sgl-mysql query("select * from tb admin where name-" Sthis-^name.""" $conn); 
/从 数据 表 tb. admin 调 出 数据 
Sinfo-mysql fetch array($sql); 
if(Sinfo—-false) 


{ 
echo "<script language='javascript'>alert(' 不 存在 此 管理 员 ! ");history.back();«/script^"; 
exit; 
} 
// 如 果 不 存在 则 显示 为 “不 存在 此 管理 员 ” 
else 
{ 


if($info[pwd]==$this->pwd) { 
header("location:default.php"); 
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} 
/如 果 正 确 则 登录 defaultphp 页 面 
else 
echo "<script language='javascript'>alert(' 密 码 输入 错误 ! ");history.back();«/script-"; 
exit; 
} 
} 
} 
} 
$obj=new chkinput(trim($ POST[name]),md5(trim($ POST[pwd])); 
$obj-»checkinput(); 
2» 


81.4 制作 树 状 菜单 


后 台 管 理 的 导航 菜单 是 一 个 树 状 的 展开 式 菜单 ， 分 为 两 级 菜单 ， 在 单 击 一 级 菜 自 
以 实现 二 级 菜单 的 展开 或 合并 ， 在 Dreamweaver 中 设计 的 样式 如 图 8-9 所 示 。 


时 可 


TB c: wpachevhtaoesvshopvadninleft.ptp _ 口 x 


CALP font. css 


> 


[Esay s [RJ 区 100* ~) m (| [BH| 785 x «65v 1 K / 1 秒 简体 中 文 (6B2312) 


图 8-9 树 状 导 航 菜单 
动态 的 展开 和 合并 是 使 用 JavaScript 实现 的 ， 核 心 的 代码 如 下 : 


LM 


javascript" 


«script language 
function openspgl() 

if(document.all.spgl.style.display--"none")( 

document.all.spgl.style.displa: 


atiis 
, 


LM 


document.all.d1.src-"images/point3.gif"; 


j 


else{ 
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EK) 


document.all.spgl.style.display-"none"; 


LM 


document.all.d1.src-"images/point 1 .gif"; 


j 


j 
function openyhgl()1 
if(document.all.yhgl.style.display--"none")( 


a 


document.all.yhgl.style.displa: ; 


LM 


document.all.d2.src-"images/point3.gif"; 


j 


else{ 


| 


document.all.yhgl.style.display-"none"; 


LM 


document.all.d2.src-"images/point1.gif"; 


} 
} 
function openddgl()( 
if(document.all.ddgl.style.display—-"none")( 
document.all.ddgl.style.display-""; 


LM 


document.all.d3.src-"images/point3.gif"; 


j 


else{ 


一 


document.all.ddgl.style.display-"none"; 


LM 


document.all.d3.src-"images/point1.gif"; 


j 


j 
function opengggl() 1 
if(document.all.gggl.style.display--"none")( 


ani. 
, 


document.all.gggl.style.display: 


LM 


document.all.d4.src-"images/point3.gif"; 


j 


else{ 


= 


document.all.gggl.style.display="none"; 


LM 


document.all.d4.src-"images/point 1 .gif"; 


j 
j 


</script> 
上 述 的 代码 经 常 被 应 用 于 网 站 的 动态 菜单 设计 ， 读 者 也 可 以 将 其 应 用 于 其 他 的 网 站 ， 
甚至 是 网 站 的 前 台 菜 单 。 


8.2 | 后 台 商品 管理 功能 


由 需求 出 发 ,“ 商 品 管理 ”包括 了 “增加 商品 ”addgoods.php、“ 修 改 商 品 ”editgoods. 
php、“ 类 别管 理 ”showleibie.php 以 及 “添加 类 别 ”addleibie.php4 个 功能 主页 面 ， 本 小 节 就 
介绍 这 几 个 商品 管理 功能 页 面 程 序 的 实现 方法 。 


In 


239 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


8.214 新 增 商品 功 能 


在 前 台所 有 展示 的 产品 都 是 要 从 后 台 进 行商 品 发 布 的 ， 供 商品 发 布 的 字段 要 与 数据 库 
中 保存 商品 的 设计 字段 一 一 对 应 ， 实 例 设计 的 增加 商品 addgoods.php 静态 页 面 其 效果 如 
图 8-10 所 示 。 


A c: wpachevhtdaocsvshopvadninvaddgoods php. Mab s 
ERED font.css conn. php TY 


EUNDEM ME ITEM ID MD 


| body? G5] [k]ey Q 00% «| m|(N]|üN] 302 x 465v 1K71 秒 简体 中 文 682312) 


图 8-10 增加 商品 的 页 面 效果 
1) 动态 的 程序 核心 代码 如 下 : 


«script language="javascript"> 
function chkinput(form) 
1 
if(form.mingcheng.value--"") 
1 
alert(" 请 输入 商品 名 称 !"); 
form.mingcheng.select(); 
return(false); 
j 
if(form.huiyuanjia.value--"") 
1 
alert(" 请 输入 商品 会 员 价 !"); 
form.huiyuanjia.select(); 
return(false); 
j 
if(form.shichangjia.value--"") 
1 
alert(" 请 输入 商品 市 场 价 !"); 
form.shichangjia.select(); 
return(false); 
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j 


if(form.dengji.value--"") 


1 


alert(" 请 输入 商品 等 级 !"); 


form.dengji.select(); 
return(false); 


} 


if(form.pinpai.value=="") 


{ 


alert(" 请 输入 商品 品牌 1"); 


form.pinpai.select(); 
return(false); 


j 


if(form.xinghao.value 


1 


=a 


alert(" 请 输入 商品 型 号 1"); 


form.xinghao.select(); 
return(false); 


} 


if(form.shuliang.value=="") 


{ 


alert(" 请 输入 商品 数量 1"); 


form.shuliang.select(); 
return(false); 


j 


if(form.jianjie.value--"") 


1 


alert(" 请 输入 商品 简介 !"); 


form.jianjie.select(); 
return(false); 


j 


return(true); 


</script> 


/进行 表单 验证 


一 


«form name-"form1" enctype 


onSubmit-"return chkinput(this)" 


multipart/form-data" method-"post" act 


ESAN 


E 后 提交 savenewgoods.php W h 


进行 处 理 


ion-"savenewgoods.php" 


2) savenewgoods.php 是 实现 将 发 布 的 商品 信息 保存 到 数据 库 的 文 从 


<?php 


include("conn/conn.php"); 
if(is numeric($ POST[shichangjia])--false || is numeric($ POST[huiyuanjia])--false) 


1 


echo "<script>alert(' 价 格 只 能 为 数字 ! ");history.back();«/script^"; 
exit; 


F， 代 码 如 下 : 
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} 
if(is numeric($ POST[shuliang])==false) 
1 
echo "<script>alert(' 数 量 只 能 为 数字 ! ");history.back();«/script^"; 
exit; 
} 
$mingcheng=$ POST[mingcheng]; 
$nian=$ POST[nian]; 
$yue=$ POST[yue]; 
$ri-$ POST[ri]; 
$shichangjia-$ POST[shichangjia]; 
$huiyuanjia-$ POST[huiyuanjia]; 
$typeid=$ POST[typeid]; 
Sdengji-$ POST[dengji]; 
$xinghao-$ POST[xinghao]; 
$pinpai-$ POST[pinpai]; 
$tuijian-$ POST[tuijian]; 
$shuliang-$ POST[shuliang]; 
$upfile-$ POST[upfile]; 
if(ceil((Shuiyuanjia/Sshichangjia)* 100)«—80) 
1 


$tejia-1; 
j 
else 
1 

$tejia-0; 
j 


function getname($exname)( 
$dir = "upimages/"; 
/ 列 出 产品 图 片 的 上 传 目录 
$i-l; 
if(lis dir(Sdir))( 
mkdir($dir,0777); 


j 
while(true)( 
if(lis file($dir.$i.".".Sexname))( 
$name-$1.".".$exname; 
break; 
j 
$i++; 
j 
return $dir.$name; 
j 
Sexnameestrtolower(substr($ FILES['upfile']|'name'],(strrpos($ FILES['upfile'] name'],'.)-1))); 
S$uploadfile = getname(Sexname); 
move uploaded file($ FILES['upfile']['tmp name'], Suploadfile); 
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if(trim($ FILES['upfile']['name']!7"")) 
1 
Suploadfile-"admin/".Suploadfile; 
} 
else 
{ 
Suploadfile-""; 
} 
$jianjie-$ POSTUTjianjie]; 
$addtime=$nian."-".$yue."-".$ri; 
mysql_query("insert into tb_shangpin(mingcheng,jianjie,addtime, dengji,xinghao,tupian,typeid, shic 
hangjia,huiyuanjia,pinpai,tuijian,shuliang,cishu)values('$mingcheng'/$jianjie','Saddtime','$dengji','Sxinghao','$ 
uploadfile','Stypeid',Sshichangjia', 
echo "«script»alert( R ii ".$mingcheng. "S JIRI !);window.location.href-'addgoods.php'; «/script?"; 
Pis 


/上 传 成 功 转 向 addgoods.php 页 面 
上 述 PHP 的 程序 编写 ， 其 核心 在 于 产品 图 片 的 上 传 功能 。 
8.2.2 ”修改 商品 功能 


在 商品 发 布 后 ， 如 果 发 现 发 布 的 商品 信息 有 和 错误， 可 以 通过 单 击 “ 修 改 商品 ”功能 
进行 商品 信息 的 调整 ， 在 后 台中 单 击 “ 修 改 商品 ”打开 的 是 editgoods.php 页 面 。 
1) 使 用 Dreamweaver 制作 的 静态 页 面 其 效果 如 图 8-11 所 示 。 


'$huiyuanjia','$pinpai','$tuijian','$shuliang','0")",$conn); 


荔 c:\ipache\htaoes\shop\adnin\editEoods. php 起 
EBEP font.css conn. php T: 
gg 


商品 信息 编辑 


z 
opo (&]&) FOR v m [| IN] 76 x 324v Kd 和 | 简体 中 文 (B2312) 
图 8-11 修改 商品 静态 页 面 效 果 
2) 在 该 页 面 中 单 击 “ 复 选 ” 复 选 枉 ， 再 单 击 “ 删 除 选择 ”按钮 可 以 实现 商品 删除 的 操 


作 链 接 到 deletefxhw.php 进行 删除 操作 。deletefxhw.php 是 从 数据 库 中 删除 该 商品 信息 的 ， 使 
用 的 代码 如 下 : 


<?php 
include("conn/conn.php"); 
while(list($name,$value)-each($ POST)) 


243 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


$sqlj=mysql query("select tupian from tb shangpin where id="".$value."",$conn); 
$info=mysq] fetch array($sql); 
if(Sinfo[tupian]!-"") 
1 
(Qunlink(substr(Sinfo[tupian],6.(strlen($info[tupian])-6))); 
} 
$sql1=mysql query("select * from tb dingdan ",$conn); 
while(Sinfol-mysql fetch array($sql1)) 
{ Sidl-Sinfol[id]; 
Sarray-explode("(Q)" ,Sinfol[spc]); 
for($i=0;$i<count($array); $i++){ 
if($array[$i]==$value) 


mysql query("delete from tb dingdan where id="".$id1."",$conn); 


mysql query("delete from tb shangpin where id=".$value.""",$conn); 
mysql query("delete from tb pingjia where spid-"".$value."", S conn); 
} 


header("location:editgoods.php"); 
2» 


3) 通过 单 击 “更 改 ” 文 字 链 接 可 以 打开 changegoods.php 页 面 进行 商品 的 信息 变更 ， 
该 页 面 设 计 的 样式 和 添加 产品 时 的 样式 是 一 模 一 样 的 ， 如 图 8-12 所 示 。 


B C: \Apache\htdocs\shop\adminichangegoods. php =E 


CLIP fontcss conn php Y 


<body>[ 


全 


5] [A] Q 10* ~) w (| N| 824 x 444v 1K/1 秒 简体 中 文 (GB2312) 


图 8-12 ”修改 商品 字段 采集 页 面 


4) 在 编辑 商品 信息 之 后 ， 单 击 “ 更 改 ”按钮 提交 表 
数据 库 的 更 新 操作 ， 核 心 代码 如 下 


Im- 


ÉF] savechangegoods.php 页 面 进行 
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«meta http-equiv-"Content- Type" content-"text/html; charset-gb2312" 


<?php 

include("conn/conn.php"); 
$mingcheng-$ POST[mingcheng]; 
$nian-$ POST[nian]; 

$yue-$ POST[yue]; 

$ri-$ POST[ri]; 

$shichangjia-$ POST[shichangjia]; 
$huiyuanjia-$ POST[huiyuanjia]; 
$typeid=$ POST[typeid]; 
$dengji-$ POST[dengji]; 
$xinghao-$ POST[xinghao]; 
$pinpai-$ POST[pinpai]; 
$tuijian-$ POST[tuijian]; 
$shuliang-$ POST[shuliang]; 
//Supfile-$ POST[upfile]; 


if(ceil((Shuiyuanjia/Sshichangjia)*100)«—80) 
1 

$tejia-1; 
j 


else 


1 
$tejia-0; 
j 
if(Supfilel-"") 
1 


$sql=mysql query("select * from tb shangpin where id=".$ GET[id]."",$conn); 


Sinfo-mysql fetch array($sql); 
(Qunlink(substr(Sinfo[tupian],6,(strlen(S$info[tupian])-6))); 
j 


function getname($exname)( 
$dir = "upimages/"; 
$i-l; 
if(lis dir(Sdir))( 
mkdir($dir,0777); 


while(true)( 
if(lis file($dir.$i.".".Sexname))( 
$name-$i.".".$exname; 
break; 

} 


$i++; 
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return $dir.$name; 


$exname=strtolower(substr($ FILES['upfile']['name'],(strrpos($ FILES['upfile'] name'],'.")-1))); 

S$uploadfile = getname(Sexname); 

move uploaded file($ FILES['upfile']['tmp name'], Suploadfile); 

$uploadfile-"admin/".Suploadfile; 

$jianjie-$ POST[jianjie]; 

S$addtime-$nian."-" .$yue."-".$ri; 

mysql query("update tb shangpin set mingcheng-'$mingcheng/"jianjie-'Sjianjie', addtime-'$addtime', 
dengji- $dengji',xinghao-'$xinghao'tupian-'Suploadfile'typeid- Stypeid',shichangjia- Sshichangjia',huiyuanji 
a-'$huiyuanjia',pinpai-' $pinpai'tuijian-'$tuijian',shuliang-'$shuliang' where id-".$ GET[id]."",$conn); 

echo "«script»alert( Ri m ".Smingcheng. f KURI V") ;history.back();;«/script»"; 


?> 


更 新 数据 库 主 要 应 用 到 了 update 这 个 数据 库 更 新 的 命令 。 


8.2.3 ”类 别管 理 功能 
商品 的 类 别提 供 了 删除 功能 ， 通 过 单 击 “ 操 作 ” 复 选 枉 ， 再 单 击 “删除 选项 ” 即 可 将 


类 别 从 数据 库 中 删除 ， 该 功能 首页 为 showleibie.php。 
1) 使 用 Dreamweaver 设计 的 该 页 面 的 静态 效果 如 图 8-13 所 示 。 该 页 面 主 要 实现 从 类 


别 的 数据 表 中 查询 出 相应 的 数据 并 绑 定 到 该 页 面 。 


B C: \Apacheihtdocsishoptadminishowleibie. php 


ERED font.css conn. php 


<body> (k] q 1008 ë ~| m [M [BH] 483x2127 1 K / 1 


图 8-13 ”类 别管 理 主页 


2) 在 单 击 选择 相应 的 类 别 复 选 框 ， 再 单 击 “ 删 除 选项 ”时 提交 表单 到 deletelb.php 动态 


页 面 进行 删除 的 操作 ， 在 删除 时 要 把 相关 联 的 商品 信息 也 一 并 删除 ， 通 过 商品 的 id 同时 删 
除 tb_type 和 tb_shangpin 即 可 实现 ， 实 现 删除 类 别 的 代码 如 下 : 


<?php 
include("conn/conn.php"); 
while(list($name,$value)-each($ POST)){ 

mysql query("delete from tb type where id=".$value."™",$conn);// 删 除 类 别 
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mysql query("delete from tb shangpin where id=".$value."",$conm);/ 删 除 类 别 下 的 
} 


header("location:showleibie.php"); 
/删除 成 功 转向 showleibie.php 页 面 
2> 


添加 类 别 功 能 


电子 商务 网 站 的 商品 是 多 利 


半 的 ， 在 后 台 要 设置 商品 分 类 的 功能 。 在 实际 的 网 站 开 


hj 


Ph 经常 有 一 级 分 类 、 二 级 分 类 甚至 三 级 分 类 ， 这 些 还 涉及 菜单 的 二 级 联动 问题 ， 本 实例 只 


建立 了 一 级 分 类 ， 管 理 者 可 以 在 后 台 直 接 添加 一 级 的 分 类 ， 添 加 类 别 功能 的 主页 面 是 
addleibie.php. 


1) 使 用 Dreamweaver 设计 的 addleibie.php 页 面 的 静态 效果 如 图 8-14 所 示 。 
a C: XÀpachekhtdocssSshophadminNaddleibie. php -BDx 
€ font. css Y 


增加 类 别 


body? (k]i&y Q dox ~| m [m BN] 493 x 212v 1 K / 1 


图 8-14 设计 的 增加 类 别 主页 效果 


2) 在 单 击 “ 增 加 ”按钮 的 时 候 ， 要 进行 表单 验证 ， 并 提交 到 saveaddleibie.php 页 面 进 
入 数据 库 的 操作 ， 该 页 面 的 代码 如 下 ; 


$leibie-$ POST[leibie]; 
include("conn/conn.php"); 
$sql=mysql query('"select * from tb type where typename-"" $leibie.""",$conn); 
Sinfo-mysql fetch array($sql); 
if(Sinfo!-false) ( 

echo"«script»alert(iZ; 2551] [2$ f£ 4E V );window.location.href-'addleibie.php';«/script»"; 
exit; 
} 
/判断 类 别 是 否 存在 
mysql query("insert into tb type(typename) values ('$leibie')",$conn); 
echo"<sctipt>alert(' 新 类 别 添加 成 功 !);window.location.href-'addleibie.php';</script>"; 
/添加 成 功 指 向 addleibie.php 


在 编写 的 时 候 要 充分 考虑 类 别 是 否 已 经 存在 ， 因 此 要 加 入 一 个 判断 。 
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8.3 | 后 台 用 户 管理 功能 


用 户 管理 功能 与 前 台 的 用 户 注册 功能 是 互相 呼应 的 ， 对 于 一 个 购物 网 站 来 说 ， 一 个 
完善 的 用 户 管理 系统 一 定 要 有 一 个 功能 比较 强大 的 用 户 后 台 管 理 ， 实 例 里 面 制作 了 “会 
员 管 理 ”“ 留 言 管理 ”以 及 “更 改 管理 员 ”3 个 菜单 项 ， 本 小 节 将 介绍 这 几 个 小 功能 的 实 

方 


会 员 的 管理 功能 主要 是 指 能 够 在 后 台 实 现 会 员 的 删除 ， 对 某 些 会 员 能 够 实现 “冻结 ?” 
的 操作 ， 保 留 会 员 的 信息 ， 但 禁止 其 在 前 台 进 行 购物 及 发 言 。 会 员 管 理 功能 的 首页 为 
edituserphp， 制 作 的 详细 步骤 如 下 : 

1) 使 用 Dreamweaver 设计 的 页 面 如 图 8-15 所 示 。 


TB C: \Apache\htdocs\shoptadmintedi tuser. php eyes 


CAEP font.ess conn. php 


[R] Q 1005 [E 619 x 247v 1 K / 1 秒 简体 中 文 (5B2312) 


-|m 


图 8-15 会 员 管 理 主页 edituser.php 


2) 在 单 击 “ 删 除 ” 复 选 枉 ， 再 单 击 “ 删 除 选项 ”时 能 够 提交 表单 到 deleteuser.php 动态 
页 面 实现 删除 会 员 数 据 的 操作 ， 该 页 面 的 程序 如 下 : 


<?php 


[H 


include("conn/conn.php"); 
while(list($name,$value)-each($ POST)) 
1 


mysql query("delete from tb user where id 


.$value."",$conn); 
mysql query("delete from tb pingjia where userid=".$value.""); 
mysql query("delete from tb leaveword where userid=".$value."",$conn); 


j 


header("location:edituser.php"); 
2» 


fT 
Yl . 
jm 


在 删除 会 员 的 时 候 同 样 要 注意 删除 数据 库 中 tb user. tb pingjia. tb leaveword3 个 数据 
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表 中 所 有 关联 的 数据 ， 删 除 成 功 后 要 返回 会 员 管理 主页 面 。 


3) 在 单 击 “ 碍 看 详细 ”链接 后 ， 打 开 的 是 对 用 户 “ 冻 结 ” 和 “解冻 ”的 页 面 lookuser- 


t 


H 


info.php， 设 计 的 页 面 如 图 8-16 Pros « 


C: \Apache\htdocs\shop\admin\lookuserinfo. php 


€ font. css 


conn. php 


DoE) DOVES 100% ~| m m [WH| 666 x 300v 1 K / 1 秒 APE (682312) 
图 8-16 用户 信息 页 面 lookuserinfo.php 
在 程序 的 编写 时 实现 “冻结 ”和 “解冻 ”其 实 非常 的 简单 ， 只 要 赋值 为 0 或 者 1 来 区 


TANEN 


TE 
员 权 限 。 代 码 也 很 简单 ， 


分 是 否 冻 结 即 可 ， 在 查询 会 员 信息 的 时 候 按 查询 是 0 或 者 1 来 给 会 
如 下 : 
<?php 
$sql=mysql_query("select * from tb user where id=".$id."",$conn); 
Sinfo-mysql fetch array($sql); 
if(Sinfo[dongjie]-—0) 
{ 
echo "冻结 该 用 户 "; 
} 
else 
{ 
echo "解除 冻结 "; 
} 
2» 
83.2 ”留言 管理 功能 
会 员 在 购物 时 遇 到 问题 可 以 直接 通过 留言 功能 和 管理 者 进行 沟通 ， 后 台 管 理 者 要 及 时 
浏览 会 员 的 留言 并 进行 相应 的 处 理 ， 对 于 一 些 没 用 的 留言 可 以 直接 进行 删除 。 用 于 留言 管理 
的 主页 面 是 lookleaveword.php。 
1) 制作 的 lookleaveword.php 页 面 效果 如 图 8-17 所 示 。 
2) 该 页 面 也 主要 是 从 数据 库 中 查询 所 有 的 留言 并 显示 在 网 页 中 的 ， 在 单 击 “删除 ” 复 
选 框 ， 再 单 击 “ 删 除 选项 ”时 提交 表单 信息 至 deleteleaveword.php 页 面 进行 删除 数据 的 操 


作 ， 实 现 删 除 的 代码 如 下 : 
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了 安全 起 见 ， 管 到 


网 站 开发 者 在 开发 时 一 般 使 有 


ü C: Mpachelht docskshophadminAlookleaveword. php -0x 


EZALE font.css conn.php function. php 


|< 
<body> 4p? 


<?php 
include("conn/conn.php"); 


RIAR po | wi 


| 图 ceo x 285v 1 x/ 1 9 简体 中 文 (B2312) 


图 8-17 留言 处 理 主页 面 lookleaveword.php 


while(list($name,$value)-each($ POST)) 


1 


mysql query("delete from tb leaveword where id=".$value."",$conm); 


j 


header("location:lookleaveword.php"); 


?> 


/删除 成 功 返 回 lookleaveword.php 


83.9 ”更 改 管理 员 


changeadmin.php 。 


目的 用 户 名 和 密码 都 是 admin， 在 提交 给 网 站 管理 者 时 ， 
者 要 能 够 实现 后 台 管 理 者 的 用 户 名 和 密码 的 修改 ， 实 现 该 功能 的 主页 


Ha 


1) 制作 的 更 改 管理 员 主 页 changeadmin.php 的 效果 如 图 8-18 所 示 。 


B C: MipachelhtdocsVshopXadninichangeadmin. php 


€ font. css 


-Dnx 


<body> 


RJO Q poos «| m m (| 767 x 2490 1 K / 1 El AP (B2312) 


图 8-18 


网 站 管理 者 后 台 修 改 主页 面 


mE 


2) 输入 新 旧 管 理 员 的 用 户 名 和 密码 ， 再 单 击 “更 改 ” 按 钮 可 以 提交 表单 进行 验证 并 提 


交 到 savechangeadmin.php 进行 数据 更 新 的 操作 ， 实 现 的 代码 如 下 : 
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<?php 

$n0=$_POST[n0]; 

$n1=$_POST[n1]; 

$p0-md5($ POST[p0]); 

$pl-trim($ POST[p1]); 

include("conn/conn.php"); 
$sql-mysql query("select * from tb admin where name-"".$n0."" $conn); 
$info=mysq] fetch array($sql); 
if(Sinfo—-false) 


1 
echo "<script>alert(' 不 存在 此 用 户 !");history.back();</script>"; 
exit; 
} 
else 
{ 
if(Sinfo[pwd]--$p0) 
1 
if($n1!="") 
{ 
mysql query("update tb admin set name=".$n1."where id=".$info[id]." ",$conn); 
} 
if($p1!="") 
{ 


$pl=md5($p1); 
mysql query("update tb admin set pwd=".$p1." where id=".$info[id]."",$conn); 


j 
j 
else 
{ 
echo "<script>alert( 原 密码 输入 错误 !);history.backO;</scripf>"; 
exit; 
} 
} 
echo "<script>alert(' 更 改 成 功 !");history.back(;</script>"; 
2» 


该 程序 首先 对 管理 员 的 用 户 名 进行 验证 ， 判 断 正 确 后 才 进 行 更 新 数据 ， 并 显示 更 新 


订单 管理 功能 是 购物 网 站 的 重点 ， 对 于 网 站 管理 者 而 言 ， 一 定 要 及 时 登录 后 台 对 订单 
进行 管理 并 及 时 发 货 。 实 例 在 登录 后 台 时 把 订单 管理 的 功能 放 到 了 默认 打开 的 页 面 ， 主 要 包 
括 “编辑 订单 ”和 “和 查询 订单 ”两 个 小 功能 ， 下 面 将 分 别 进行 介绍 。 
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8.41 编辑 订单 功能 


所 谓 的 编辑 订单 是 指 管理 者 在 登录 后 台 后 ， 对 会 员 提 交 的 订单 进行 “已 收 款 ”“ 已 发 
货 ”“ 已 收 货 ”验证 ， 同 进 要 及 时 打印 出 网 上 订单 提交 给 公司 进行 发 货 处 理 。 编 辑 订单 的 主 
页 是 lookdd.php。 

1) 设计 的 lookdd.php 页 面 的 效果 如 图 8-19 所 示 。 该 页 面 用 来 查看 简 
只 要 从 数据 库 中 查询 订单 并 进行 显示 即 可 。 


Im- 


的 订单 信息 ， 


B C: \Apache\htdocs\shopiadminilookdd. php enl 


CAEP font css conn. php F 


body> [x]&) Q 100*  v| m| | 766 x 249v 1K71 秒 | 简体 中 文 (82312) 


图 8-19 查看 订单 页 面 lookdd.php 


2) 设计 的 第 二 步 就 是 实现 单 击 “ 查 看 ”按钮 时 ， 能 调 出 订单 的 详细 内 容 showdd.php 页 
面 ， 并 能 进行 打印 ， 该 页 面 的 效果 如 图 8-20 所 示 。 


B C: \Apache\ht docs\shop\admin\showdd. php -Dx 


EBEP fontess conn. php Y 


|&body^ Ko [k]&y Q 100 ë ~) m m IN] 766 x 325v 1 K / 1 秒 简体 中 文 (GB2312) 


图 8-20 订单 详细 内 容 
在 showdd.php 页 面 中 调用 函数 来 实现 打印 的 功能 ， 具 体 的 代码 如 下 : 


<html> 

<head> 

«meta http-equiv="Content-Type" content-"text/html; charset=gb2312"> 
<title> 商 品 订单 </title> 

<link rel="stylesheet" type="text/css" href="css/font.css"> 

<style type="text/css"> 
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«I-- 
@media print ( 
div {display:none} 
j 
.style3 (color: #990000} 
一 -> 
</style> 
</head> 
<?php 
include("conn/conn.php"); 
$id-$ GET[id]; 
$sql-mysql query("select * from tb dingdan where id=".$id."",$conn); 
$info=mysq] fetch array($sql); 
$spc=$info[spc]; 
$slc=$info[slc]; 
$arraysp=explode("@",$spc); 
$arraysl=explode("@",$slc); 
?> 
<body topmargin="0" leftmargin="0" bottommargin="0"> 
<p>&nbsp;</p> 
«table width-"600" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr align="center" bgcolor="#FFCF60"> 
«td height="20" colspan="2" bgcolor="#0099FF"> 商 品 订单 </td> 
</tr> 
<tr> 
<td width="448" height="20"> 订 单 号 : <?php echo $info[dingdanhao];?></td> 
«td width="152"><div align="right"> 
<script> 
function prn(){ 
document.all. WebBrowserl.ExecWB(7,1); 
j 
</script> 
/实现 打印 预览 的 功能 
<object ID='"WebBrowserl' WIDTH=0 HEIGHT-0 CLASSID-'CLSID:8856F961- 
340A-11D0-A96B-00C04FD705 A2'7«/object 
«input type="button" value=" 打 印 预览 " class-"buttoncss" onClick-"prn()"»&nbsp; 
«input type="button" value=" 打 印 " class="buttoncss" onClick="window.printO"></div></td> 
/实现 打印 的 功能 
</tr> 
<tr> 
«td height="20" colspan="2"> R] MYJK F): </td> 
</tr> 
</table> 
<table width="500" height="60" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td bgcolor="#666666"><table width="500" border="0" align="center" cellpadding="0" 
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cellspacing="1"> 
<tr bgcolor="#0099FF"> 
«td width="153" height="20"> 商 品名 称 </td> 
<td width="80"> 市 场 价 </td> 
«td width="80"> 会 员 价 </td> 
<td width="80"> 数 量 </td> 
«td width="101"> 小 计 </td> 
</tr> 
<?php 
$total=0; 
for($i=0;$i<count($arraysp)-1;$i++){ 
if($arraysp[$i]!=""){ 
$sqll=mysql_query("select * from tb shangpin where id="".$arraysp[$i]."",$conn); 


Sinfol-mysql fetch array($sql1); 
Stotal-Stotal--—Sarraysl[$i] *Sinfol[huiyuanjia]; 
?> 
<tr bgcolor="#FFFFFF"> 
<td height="20"><?php echo $infol[mingcheng];?></td> 
<td height="20"><?php echo $info1[shichangjia];?></td> 
<td height="20"><?php echo $info1[huiyuanjia];?></td> 
<td height="20"><?php echo $arraysl[$i];?></td> 
«td height="20"><?php echo $arraysl[$i]*$info1[huiyuanjia];?></td> 
</tr> 
<?php 
j 
j 
?> 
<tr bgcolor="#FFFFFF"> 
<td height="20" colspan="5"> 
总 计 费 用 :<?php echo $total;?> 
</td> 
</tr> 
</table></td> 
</tr> 
</table> 


«table width="460" border="0" align="center" cellpadding-"0" cellspacing="0"> 


<tr> 
«td width="81" height="20"> FA: </td> 
<td colspan="3"><?php echo $info[xiadanren];?></td> 
</tr> 
<tr> 
«td height="20"> 收 货 人 : </td> 
«td height="20" colspan="3"><?php echo $info[shouhuoren];?></td> 
</tr> 
<tr> 
<td height="20"> 收 货 人 地 址 : </td> 
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«td height-"20" colspan-"3"7«?php echo $info[dizhi];?></td> 
</tr> 
<tr> 
<td height-"20"lll&nbsp;&nbsp; Zi: </td> 
<td width="145" height="20"><?php echo $info[youbian];?></td> 
<td width="66"> 电 &nbsp;&nbsp; 话 : </td> 
«td width="158"><?php echo $info[tel];?></td> 
</tr> 
<tr> 
«td height="20">E-mail:</td> 
<td height="20"><?php echo $info[email];? ></td> 
<td height="20">&nbsp;</td> 
<td height="20">&nbsp;</td> 
</tr> 
<tr> 
«td height="20"> 送 货 方式 : </td> 
«td height="20"><?php echo $info[shff];?></td> 
«td height="20"> 支 付 方式 : </td> 
«td height="20"><?php echo $info[zfff];?></td> 
</tr> 


«tr» 


«td height-"20" colspan="4"><span class-"inputcssnull"7[ 3X5] 13 


电子 商城 后 台 功 能 开发 | 


E 明 您 的 订单 号 ! d 


时 联系 我 们 ! </span></td> 


</tr> 
<tr> 
<td height="20">&nbsp;</td> 


[ 款 后 请 及 


«td height="20"><div align="center"><input type="button" onClick-"window.close()" value=" 关 
闭 窗 口 " class="buttoncss"></div></td> 


«td height="20"> 创 建 时 间 : </td> 
«td height="20"><?php echo $info[time];?></td> 


</tr> 


</table> 
</body> 
</html> 


3) 要 实现 订单 的 网 上 处 理 ， 需 单 击 “ 执 行 ” 按 钮 打开 orderdd.php 页 面 ， 上 面包 括 了 
ERR” "eto elis 3 个 复 选项 ， 对 其 进行 相应 的 处 理 即 可 。 


4) 单 击 “修改 ”按钮 即 可 提交 表 到 saveorder.php 进行 修改 数据 的 保存 ， 上 其 体 的 代码 如 下 : 


<?php 
$ysk=$_POST[ysk]."&nbsp;"; 
$yfh-$ POST[yfh]."&nbsp;"; 
$ysh=$ POST[ysh]."&nbsp;"; 
$zt-"": 

if(Sysk!-" &nbsp;") í 


j 


$zt.-$ysk; 


255 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


A ci wpachevhtaocs\shopvaaninvorderad php. -OX 


ERED font.css conn. php Ti 


RERE] Ra poos  v| m (m mj 886 x 434v 1 K / 1 秒 简体 中 文 (GB2312) -| 


图 8-21 标记 订单 orderdd.php 


if($yfh!="&nbsp;"){ 
$zt.=$yfh; 
j 
if(Sysh!-"&nbsp;")í 
$zt.=$ysh; 
} 
if(($ysk=="&nbsp;")&&($yfh=="&nbsp;")&&($ysh=="&nbsp;")){ 
echo "<script>alert(' 请 选择 处 理 状态 !");history.back();</script>"; 


exit; 
} 
include("conn/conn.php"); 
$sql3=mysql query("select * from tb dingdan where id=".$ GET[id]."",$conn); 
Sinfo3-mysql fetch array($sql3); 
if(trim($info3[zt]))==" 未 作 任 何 处 理 "){ 
$sql=mysql query("select * from tb dingdan where id=".$ GET[id].""",$conn); 


Sinfo-mysql fetch array($sql); 
Sarray-explode("(Q)",Sinfo[spc]); 
Sarraysl-explode("(Q)",Sinfo[slc]); 


for($i-0;$i«count(Sarray);$i-—) ( 
$id=$array[$i]; 
$num=$arraysl[$i]; 
mysql query("update tb shangpin set cishu=cishu+'".$num." ,shuliang-shuliang-"".$num."" 
where id-".$id.""",$conn); 
} 
} 

mysql query("update tb dingdan set zt='".$zt."'where id-".$ GET[id]."",$conn); 

header("location:lookdd.php"); 
2» 
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上 述 4 个 步骤 的 设计 ， 后 台 的 订单 编辑 功能 即 开发 完成 。 


8.4.2 ”查询 订单 功能 


在 


Dr 
mr 
CC 


功能 开发 | 


网 站 运营 一 段 时 间 后 ， 网 上 的 订单 会 越 来 越 多 ， 也 经 常会 遇 到 会 员 查 询 订单 的 情 


况 ， 网 站 管理 者 同样 也 需要 一 个 订单 的 后 台 查 询 功 能 ， 这 样 能 方便 地 找到 相应 的 订单 。 实 例 
查询 和 显示 的 结果 是 在 同一 个 页 面 ， 即 finddd.php。 
1) 制作 的 finddd.php 页 面 的 效果 如 图 8-22 所 示 。 


à 
Ell c: Wipache\htdoes\shop\adnin\finddd. php EX 


ERED font.css conn. php *Y 


body? (G2) [R] Q 105 v m (W| BN] 588 x 275v 1 K / 1 E (iere G3 


图 8-22 查询 订单 finddd.php 


2) 核心 程序 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content-"text/html; charset=gb2312"> 
<title> 订 单 查询 </title> 
<link rel="stylesheet" type="text/css" href-"css/font.css" 
</head> 
<?php 
include("conn/conn.php"); 


?> 

<body topmargin="0" leftmargin="0" bottommargin="0"> 

<p>&nbsp;</p> 

<table width="550" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 


«td height="20" bgcolor="#0099FF"><div align="center" style="color: #FFFFFF"> 订 单 查 


询 </div></td> 


</tr> 
<tr> 


«td height="50" bgcolor="#555555"><table width="550" height="50" 
align="center" cellpadding="0" cellspacing="1"> 


«tr 


border-"0" 
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«td bgcolor="#FFFFFF"> 
«table width-"550" height-" 50" border-"0" align="center" cellpadding="0" cellspacing-"0" 


I" 


«script language-" javascript" 
function chkinput3(form) 
{ 
if((form.username.value=="")&&(form.ddh.value=="")) 
{ 
alert(" 请 输入 下 订单 人 或 订单 号 "); 
form.username.select(); 
return(false); 


j 


return(true); 


</script> 
<form name="form3" method="post" action="finddd.php" onSubmit="return 
chkinput3(this)"> 
<tr> 


«td height="25"><div align="center"> PTT $. A WEZ :<input type="text" name= 


"username" class-"inputcss" size="25" > 


订单 号 :<input type="text" name="ddh" size="25" class="inputcss" ></div> 


</td> 
</tr> 
<tr> 
<td height="25"> 
<div align="center"> 
<input type="hidden" value="show_find" name="show_find"> 
<input name-"button" type="submit" class-"buttoncss" id="button" 
value-"f j£" 
</div></td> 
</tr> 
</form> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 


<table width="550" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<?php 
if($_POST[show_find]!=""){ 
$username=trim($ POST[username)); 
$ddh=trim($ POST[ddh]); 
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if(Susername--"")( 
$sql=mysql query('"select * from tb dingdan where dingdanhao="".$ddh.""",$conn); 
} 
elseif($ddh==""){ 
$sql=mysql query("select * from tb_dingdan where xiadanren="".$username.""",$conn); 
} 
else{ 
$sql=mysql_query("select * from tb_dingdan where xiadanren=".$username."and dingdanhao = 
"$ddh."",$conn); 
} 
$info=mysq] fetch array($sq)); 
if($info==false){ 
echo "<div algin='center> 对 不 起 ,没有 查找 到 该 订单 !</div>"; 
} 
else 
?> 


«table width="550" border="0" align="center" cellpadding="0" cellspacing="0"> 
«tr» 
«td height-"20" bgcolor="#0099FF"><div align="center" style="color: #FFFFFF"> 查 询 结 


果 </div></td> 

</tr> 

«tr» 

«td  height-"50" bgcolor="#555555"><table  width-"550"  height-"50"  border-"0" 
align="center" cellpadding-"0" cellspacing-"1" 


<tr> 
«td width="77" height="25" bgcolor="#FFFFFF"><div align="center"> 订 单 写 </div></td> 
«td width="77" bgcolor="#FFFFFF"><div align="center"> 下 单 用 户 </div></td> 
<td width="77" bgcolor="#FFFFFF"><div align="center"> 订 货 人 </div></td> 
«td width="77" bgcolor="#FFFFFF"><div align="center"> 金 额 总 计 </div></td> 
«td width="77" bgcolor="#FFFFFF"><div align="center"> 付 款 方式 </div></td> 
«td width-"77" bgcolor="#FFFFFF"><div align="center"> 收 蒜 方式 </div></td> 
«td width-"77" bgcolor="#FFFFFF"><div align="center"> 订 单 状态 </div></td> 
</tr> 

<?php 

do{ 


?> 


<tr> 
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[dingdanhao];?> </div> 
</td> 
«td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[xiadanren];?></div></td> 
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[shouhuoren];?> </div> 
</td> 
«td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[total];?></div></td> 
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[zfff];?></div></td> 
«td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[shff];?></div></td> 
«td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[zt];?></div></td> 
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</tr> 
<?php 

}while($info=mysql_fetch_array($sq1)); 
?> 

</table></td> 
</tr> 
</table> 
<?php 
j 
} 

2» 
</body> 
</html> 


信息 管理 功能 是 指 在 网 站 后 台 对 新 闻 、 用 户 的 商品 评价 等 实现 相关 的 管理 操作 。 实 例 
制作 了 “管理 公告 "“ 发 布 公告 ”以 及 “管理 评价 ”3 个 功能 ， 通 过 这 3 个 功能 能 够 实现 束 
个 网 站 的 即时 公告 发 布 、 公 告 修改 以 及 商品 评论 的 编辑 修改 功能 。 


8.5.1 管理 公告 


管理 公告 功能 是 指 在 后 台 对 发 布 的 公告 进行 修改 和 删除 的 操作 ， 实 例 管理 公告 的 主页 
为 admingonggao.php。 
1) 制作 的 admingonggao.php 页 面 的 效果 如 图 8-23 所 示 。 


B C: MApache\htdocs\shoptadmintadmingonggao. php = 0x 
€ font.css conn. php Y 
jj | 


共有 公告 


~| m m BN] 756x270v 1 K / 1 秒 | 简体 中 文 (6B2312) 


[R] Q fo0% 


T 


图 8-23 
2) 单 击 “ 选 择 ” 复 选 框 ， 再 单 击 “ 删 除 所 选 ” 可 以 提交 表单 到 deletegonggao.php 进行 
删除 公告 的 操作 ， 代 人 码 如 下 : 


<?php 
include("conn/conn.php"); 


HA admingonggao.php 
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while(list($name,S$value)-each($ POST)) 
1 


mysql query("delete from tb gonggao where id="".$value.""",$conn); 
j 
header("location:admingonggao.php"); 
2» 


3) 单 击 “修改 ”文字 链接 ， 可 以 打开 editgonggao.php 页 面 进 行 公 告 的 编辑 操作 ， 该 页 
面 如 图 8-24 所 示 。 


而 C: wpachevhtaocsvshopvaaninveditgonggao.php 


EBEP font. css conn. php Y 


-0x 


body? EJ [R] Q 100 ~| m| |) 742 x 310v 1 /1 秒 简体 中 文 (6B2312) 


图 8-24 ”修改 公告 editgonggao.php 


4) 输入 修改 的 公告 主题 和 公告 内 容 ， 再 单 击 “ 更 改 ” 按 钮 可 以 提交 表单 到 saveeditgo- 


nggao.php 进行 内 容 的 更 新 操作 ， 更 新 的 代码 如 下 : 
<?php 

$title=$ POST[title]; 

$content=$ POST[content]; 


include("conn/conn.php"); 
mysql query("update tb gonggao set title-'Stitle''content-'$content' where id-".$ POST[id]." 


™ $conn); 
echo "<script>alert(' 公 告 修改 成 功 !");history.back();</script>"; 
2» 


85.2 ”发 布 公告 
用 于 添加 新 的 公告 的 页 面 是 addgonggao.php， 在 公告 的 字段 进行 数据 的 插入 操作 即 可 实 
现 ， 本 小 节 将 介绍 添加 新 公告 的 具体 方法 。 
1) 制作 的 采集 公告 的 addgonggao.php 页 面 的 效果 如 图 8-25 所 示 。 
2) 录入 完 主 题 和 内 容 之 后 ， 单 击 “ 添 加 ”按钮 可 以 提交 表单 进行 验证 ， 并 提交 到 
savene-wgonggao.php 页 面 进行 新 闻 公 告 的 保存 操作 ， 实 现 的 代码 如 下 : 


<?php 
include("conn/conn.php"); 
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T c: apachevhtdocsvshop\aaninvaddgonggao.php -0x 


CARED font. css 


body? o] [k]&y Q 100$ ~) m [W| N| 742 x 310v 1 K / LI 秒 | 简体 中 文 682312) 


图 8-25  addgonggao.php 页 面 的 效果 


$title=$ POST[title]; 
$content=$ POST[content]; 
S$time-date("Y -m-"); 
mysql query("insert into tb gonggao (title,content,time) values ('Stitle','Scontent','Stime")",$conn); 
echo "<script>alert(' 公 告 添加 成 功 !");history.backO;</script>"; 
2» 


85.9 ”管理 评价 


后 台 的 最 后 一 个 功能 是 管理 评价 功能 ， 通 过 管理 可 以 将 商品 的 一 些 负面 信息 进行 删 
除 ， 管 理 评价 功能 的 页 面 是 editpinglun.php， 制 作 的 方法 如 下 : 
1) 制作 的 editpinglun.php 页 面 的 效果 如 图 8-26 所 示 。 


Li 


Bl c: ups che nt does shop Va dnin vedi tpinglun. php -0x 
KA font.css conn. php Y 


编辑 用 户 评价 


[body> 4p? RT {oos ~| m| |) 758 x 270v 1 K / 1 秒 | 简体 中 六 (6B2312) 


图 8-26 编辑 用 户 评价 editpinglun.php 


2) 通过 单 击 “ 查 看 ”文字 链接 可 以 打开 Windows 窗口 显示 评价 的 详细 内 容 ， 实 现 的 代 


<?php 
include("conn/conn.php"); 
$sql=mysql query("select count(*) as total from tb pingjia ",$conn); 
Sinfo-mysql fetch array($sql); 
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S$total-Sinfo[total]; 
if($total==0) 
1 
echo "本 站 暂 无 用 户 发 表 评 论 !"; 
} 


else 


{ 


?> 


LM 


«script language-"javascript" 
function openpj(id) 
{ 
window.open("lookpinglun.php?id="+id,"newframe","width=500,height=300,top=100,left=200,menuba 
r-no,toolbar-no,location-no,scrollbar-no,status-no"); 


} 
</script> 
3) 单 击 “ 删 除 ” 复 选 框 ， 再 单 击 “删除 选项 "， 可 以 提交 表单 至 删除 评价 的 页 面 
deletepingjia.php， 该 页 面 的 代码 如 下 : 
<?php 
include("conn/conn.php"); 
while(list($name,$value)-each($ POST)) 


1 
$id=$value; 
mysql query("delete from tb pingjia where id=".$id."",$conn); 
} 
header("location:editpinglun.php"); 
?> 


本 章 系统 地 讲解 了 翡 歼 电 子 商 城 的 后 台 管 理 开发 办 法 ， 一 般 的 电子 商城 的 常用 功能 也 
无 非 就 这 些 ， 有 些 比较 复杂 的 结算 系统 ， 如 积分 系统 、 登 代 结 算 系 统 等 ， 都 是 在 使 用 PHP 
的 运算 函数 基础 上 使 用 客户 提供 的 结算 运算 公式 去 实现 的 ， 读 者 可 以 触 类 旁 通 、 举 一 反 三 ， 
在 掌握 本 系统 的 开发 方法 的 基础 上 做 更 多 的 需求 开发 ， 以 真正 地 成 为 PHP 高 级 程序 员 。 
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电子 商务 网 站 


章 ”电子 商务 网 站 省 理 与 维护 


在 开发 完成 后 需要 上 传 到 服务 器 ， 并 配置 服务 器 的 安全 ， 在 这 之 后 才 可 


以 投入 运营 进行 使 用 。 在 开始 运营 之 前 要 考虑 物流 、 


支付 以 及 售后 的 服务 三 个 重要 的 环节 ， 


这 三 个 环节 一 直 是 商家 最 头疼 的 问题 ， 专 业 的 人 做 专业 的 事 ， 可 以 把 这 儿 块 “人 硬骨头 ”于 给 
其 他 第 三 方 处 理 。 本 章 将 重点 介绍 一 下 电子 商务 网 站 的 货款 支付 、 物 流 配送 问题 ， 同 时 介绍 


网 站 售后 处 理 顾客 意见 的 方法 和 网 站 的 后 期 安全 防范 。 


本 章 重点 介绍 


如 下 知识 : 


(7 网 站 的 配置 和 上 传 

O 电子 商务 网 站 的 支付 问题 
(7 选择 物流 配送 的 方法 
它 ) 网 站 的 售后 服务 策略 
(— 电子 商务 网 站 安全 防范 


9.1 | 网 站 的 配置 和 上 伟 


电子 商务 网 站 建设 完成 后 ， 需 要 上 传 到 服务 器 或 者 购买 的 空间 并 进行 配置 ， 这 样 才能 
网 访问 到 网 站 ， 本 小 节 将 介绍 一 下 这 方面 的 知识 。 


9.41. 通过 DreamWeayer 上 传 网 站 


在 Dreamweaver CS6 中 设计 好 网 站 后 ， 需 要 通过 Dreamweaver 软件 进行 上 传 操 作 ， 下 


让 浏览 者 通过 万 维 


面 将 介绍 如 何在 Dreamweaver CS6 中 ， 直 接 上 传 建 


上 传 网 站 的 有 具 


体操 作 步 又 如 下 : 


D 在 设置 好 六 


管理 页 面 ， 如 图 9-1 所 示 。 


设 好 的 网 站 内 容 到 服务 器 上 。 


占 点 ， 并 建立 完成 整个 网 站 内 容 后 ， 单 击 Dreamweaver CS6“ 文 件 ” 面 板 
中 的 “展开 以 显示 本 地 和 远 端 站 点 ”按钮 加， 同时 ， 将 “文档 ”窗口 切换 到 “站 点 ”编辑 


z 


2) 单 击 “ 连 接 到 远 端 主机 ”按钮 里 ， 在 这 里 ， 


器 ”和 “本 地 文人 
图 9-2 所 示 。 


刚 切 换 过 来 的 页 面 显示 的 是 “远程 服务 


F” 两 个“ 文档” 窗口， 这 两 个 文件 夹 全 部 在 本 地 人 硬盘 上 ， 具 体 效果 如 


3) 选择 表单 栏 “ 站 点 ”一 “管理 站 点 ”命令 ， 


传 的 站 点 文件 shop， 然 后 双击 建立 的 shop 站 上 点， 打开“ 


图 9-3 所 示 。 


4) 单 击 分 类 选项 组 中 的 “服务 器 ” 列 选项 ， 


打开 “管理 站 点 ”对 话 框 ， 选 择 将 要 上 
占 点 设置 对 象 shop” 对 话 框 ， 如 


Mr 


再 单 击 增加 “添加 新 服务 器 ”按钮 ， 在 打 
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开 的 面板 中 选择 “连接 方法 ”为 “FTP” 命 令 ; 在 “FTP 地 址 ”文本 框 中 输入 服务 器 的 IP 
地 址 ， 如 这 里 的 IP 地 址 为 220.113.15.16; 在 “用 户 名 ”文本 框 中 输入 用 户 名 ; 在 “密码 ” 
文本 框 中 输入 密码 ， 其 他 的 保持 默认 值 。 具 体 设 置 如 图 9-4 所 示 。 


Dw xo mA xS RAO Wr O% à 设计 器 - 
Ex O3 Rk esse |o29 el) 


= n EC) 站 点 - shop (Copa. 2013-3-26 11:37 
TEER asrAE IMG BD shin 2013-3-10 21:46 
conn 2013-3-10 21:46 
ess 2013-3-10 21:46 
images 2013-3-10 21:46 
wpisages 2013-3-18 14:07 
addgonggso. php 2011-6-27 9:07 
addgoods. php 2011-6-27 9:19 
addleibie. php 2011-6-27 9:11 
adingonggao. 2011-6-27 9:14 
changeadain php 2011-6-27 9:17 
changegoods. php 2011-6-27 9:20 
changeleavew. 2001-11-18 14:04 
chkadsin php 2001-11-27 19:54 
default. php 2011-6-27 8:43 
deleteallip. php 2007-11-18 14:04 
deletedà php 2001-11-18 14:04 
deletefzhy. php. 2007-11-18 14:04 
deletegongga- 2007-11-18 14:04 
deletelb php 2007-11-18 14:04 
2001-11-18 14:04 
agji 2007-11-18 14:04 
deleteuser. php 2001-11-18 14:04 
dongjieuser. php 2001-11-18 14:04 
editgonggao. php 2011-6-27 9:22 
editgoods. php 2011-6-27 9:22 
edi tleavevor. 2011-6-27 9:23 
editpinglun. php 2011-6-27 9:24 
edituser. php : 2011-6-27 9:24 
2011-6-27 


8-8-8-m 
0000 


al o 
011-6-27 9:30 大 小 : TES 


* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
* 
E - 


图 9-1 打开 的 “站 点 ”编辑 管理 页 面 


DW 文件 (DD) do sto MAO Ni Ov» àv 设计 器 > 
mil — ^3 A L E ele 
^ 
EQ Ci\Apacheihtdocsishop\ BO MA- shop (C: Ups 2013-3-26 11:31 ~ 
SQ) win XPE 2013-3-10 i 日 -加 win XAR 2013-3-10 21:46 - 
© coma LFR 2013-3-10 和 田 conn X#R 2013-3-10 21:46 - 
DO es 文件 吉 2013-3-21 1 mo s XAR 2013-3-10 21:46 - 
Q au XPRRO— 2013-3710 4 B isses XAR 2013-3-10 21:48 - 
$-Q) Ah 文件 下 2013-3-26 € 田 - 包 inages XPEX 2013-3-18 14:07 - 
Q imgs: IFR 2013-3-2 | "ES addgonggso. php 2KB PHP 文件 2011-6-27 9:07 
$-Q p XR 。 2013-3-22 | Œ adigoods. phy TB PE 文件 2011-6-27 9:19 
SO Seripts XE 2013-3-2 € T adileibie. php 2Kb Pe 文件 2011-6-27 9:11 
SQ stye XR 2013321 和 "ES viningengeao AKB PMP 文件 2011-6-27 9:14 
"NS addgouruche. php 1B PE 文件 2011-6-28 6 "NS  changeadain php — 4KB PNP 文件 2011-6-27 9:17 
T pereg php 2K PE 文件 2011-6-27 1 E changegoods.php OKB PNP 文件 2011-6-27 9:20 
"B bottos. php 1 MG 文件 2013-3-21 1 "ho changeleavew 1KB PIP 文件 2007-11-18 14:04 
© changeuser. php 1KB PP 文件 2007-11-18 "Ro chkadain php 1KB PIT XD 2007-11-27 19:54 
T changeuserpwd php 4X» PE 文件 2011-6-27 1 "S aet php 22KB FP 文件 2011-6-27 8:43 
"NS ochkuser php 21B Pe 文件 2007-11-19 — È ddetedlip php — 1KB PNP 文件 2007-11-18 14:04 
"NS ochkssernc. php 1KB PHP 文件 2011-6-29 1 "E adetedd php 1KB PHP 文件 2007-11-18 14:04 
"B deetedll php 1Kb PP 文件 2011-6-28 6 "Bo ddetefzhw php 118 PMP 文件 2007-11-18 14:04 
T endconn php 1K FP 文件 2007-10-26 "Bo deletegongga 1 PHP 文件 2007-11-18 14:04 
T findid php ek» PP 文件 2011-6-27 1 "B àdetelb php 1KB PE 文件 2007-11-18 14:04 
"B findped php ?Kb PE 文件 2011-6-27 £ "B ádeteleavew 1Kb PE 文件 2007-11-16 14:04 
"NS function php 1$ PE 文件 2007-11-14 "b adeteingii 1B PP 文件 2007-11-10 14:04 
"NS gonggao. php 21B PiP 文件 2013-3-21 4 E deleteuser. php 1KB PE 文件 2007-11-16 14:04 
"NS genggeolist. php 4B PE 文件 2013-3-22 | = dongjieuser. php 15B PMP 文件 2007-11-18 14:04 
T goul. php Sp PP 文件 2011-6-27 1 "5 editgonggao.php — 3KB PIP 文件 2011-6-27 9:22 
T gom? php TKb FE 文件 2011-6-27 1 E editgoods. php GKB PIP 文件 2011-6-27 9:22 
"No gowuche. php SKB PP 文件 2013-3-21 1 "E editleseror ?KB PIP 文件 2011-6-27 9:23 
T gomsun php TB Fg Xf 2011-6-27 1 Œ editpinglunphp SKB PIP 文件 2011-6-27 9:24 
"5 highsearch php 4m ne 文件 2011-6-27 1a "ES edituser. php SIB PP 文件 2011-6-27 9:24 
pp 0 fimdd php SIB PIP 文件 2011-6-27 9:24 a 
= 3 一 t a ` srm mm dehh annn sa an aran L 
|Q BM: 2013-3-10 21:46 


图 9-2 ”连接 到 远 端 主机 后 的 效果 
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— PHP+MySQL 电 商 网 站 设计 与 制作 


站 点 设置 对 象 shop 
Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 


站 点 通常 包含 两 个 部 分 ; 可 在 其 中 存储 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 吕 在 其 中 将 相同 文件 发 布 到 web 上 的 服务 器 上 的 远程 文件 夹 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 来 和 名 称 。 
站 点 名 称 ; | shop 
本 地 站 点 交 件 夹 ; |C'\Apache\htdocs\shop\ 


站 点 设置 对 象 shop 


1| 202.113.15.16 


1 | www.hbcultute.com 


Web URL: [ http:/127.0.0.1 


> 更 多 选项 


Cm] 


llo] 


图 9-4 设置 “远程 信息 ”对 话 杠 


Wi BB: 

FTP X TCP/IP 网 络 上 两 台 计 算 机 传送 文件 的 协议 ， 是 在 TCP/IP 网 络 和 INTERNET 上 
最 早 使 用 的 协议 之 一 。 尽 管 World Wide Web (WWW) 已 经 替代 了 FTP 的 大 多 数 功能 ， 但 
FTP 仍然 是 通过 Internet 把 文件 从 客户 机 复制 到 服务 器 上 的 一 种 途径 。FTP 客户 机 可 以 给 服 
务 器 发 出 命令 来 下 载 文件 、 上 传 文件 、 创 建 或 改变 服务 器 上 的 目录 。 网 站 建设 后 一 般 都 采用 
FTP 软件 来 维护 网 站 、 更 新 文件 ， 可 以 用 Dreamweaver CS6 建立 远程 服务 器 地 址 ， 直 接 下 
载 网 站 内 容 。 其 他 常用 的 软件 ， 还 有 Flash FXP 等 软件 。 其 中 IP 地 址 220.113.15.16 是 由 网 
站 所 有 者 向 服务 器 空间 经 营 商 索 要 的 ， 一 般 在 购买 的 时 候 服务 器 提供 商 就 会 提供 专用 的 IP 
地 址 、 登 录用 户 名 和 密码 。 


5) 输入 远程 信息 之 后 ， 单 击 对 话 框 上 的 “测试 ”按钮 ， 就 可 以 测试 是 否 能 接 上 服务 
器 ， 如 果 设 置 正确 ， 则 会 打开 测试 成 功 对 话 框 ， 如 图 9-5 所 示 。 
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主机 ”按钮 器 ， 


Dreamweaver 
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Dreamweaver 已 成 功 连接 到 您 的 web 服务 器 。 


图 9-5 ”连接 成 功 对 话机 


IHI 


6) 单 击 “确定 ”按钮 ， 返 回 “ 远 端 站 点 ”编辑 窗口 ， 再 单 击 工 具 栏 上 的 “连接 到 远 端 


9-6 所 示 。 


则 会 打开 “后 台 文 件 活 动 -shop” 对 话 框 ， 


Dw xc) Ac) 查看 WV) Xs Wr Ov Br 


Em O ho 


< 


7) 1E “本 


了 ， 


便 ， 


SETOR :请 单 击 工具 栏 上 的 @3 


so 站 点 


so 


VA UU EE EE 4344334 J0( 


从 Se MARSA AW: 2011-6-27 9:11 大 小 : 2B 


w RELE - shop 


x&ejrsse |s ¢7 eE 


- shop (C: Mp. 
30 i 


conn 
ess 

images 
wpisages 
addgonggas. php 
adádgoods. php 
addleibi e. php 
aingonggao 
changeadain php 
changegoods. php 
changeleavex. 
chkadein php 
default. php 
deleteallip. php 
deletedd php 
deletefzhy. php 
deletegongga. 
deletelb. php 
deleteleavew 
deletepingji 
deleteuser. php. 
dongjieuser. php 
edi tgenggao. php 
edi tgoods. php 
editleavewor 
editpinglun php 
edituser php 


^ finddà php 


xu. 


2013-3-26 11.37 - 
2013-3-10 21:46 ~ 
2013-3-10 21:46 ~ 
2013-3-10 21:46 - 
2013-3-10 21:46 

2013-3-18 14:07 ~ 
2011-6-27 9:07 


2007-11-18 14:04 
2007-11-27 19:54 
2011-6-27 8:43 

2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 
2007-11-18 14:04 


2011-6-27 9:23 
2011-6-27 9:24 
2011-6-27 9:24 
2011-6-27 9:24 


ALLL WWW Ww WW 
(arer Cea [Ca 


里 面 显示 的 “文档 ”窗口 结构 同 本 地 的 “文档 ” 


图 9-6 连接 状态 对 话 框 
地 文件 ”的 编辑 “文档 ”窗口 中 ， 选 择 要 上 传 的 文件 ， 


窗口 结构 是 一 样 


显示 获得 文件 夹 信息 状况 ， 如 


然后 单 击 工具 栏 上 的 
“上 传 文件 ”按钮 9 ， 这 样 所 有 的 文件 ， 就 上 传 到 “远程 服务 器 ”的 编辑 “文档 ”窗口 中 


的 ， 如 图 


9-7 所 示 。 


通过 这 些 设置 就 完成 了 整个 网 站 的 上 传 操作 ， 如 果 觉 得 用 Dreamweaver CS6 上 传 不 方 
第 三 方 软件 直接 上 传 ， 如 使 用 FlashFXP 软件 。 


还 可 以 利 月 
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un 文件 
im ne 文件 
uD ne 文件 
3n» 文件 
epp rr 文件 
2 pw 文件 
so PIT 文件 
sp rn 文件 
sm nex 


aem sem tanh 


Riwi - 二 


2013-3-10 21:48 ~ 
2013-3-10 21:45 ~ 
2013-3-10 21:46. - 
2013-3-10 21:48 ~ 
2013-3-18 14:07 ~ 
2011-6-27 9 0T 
2011-6-27 9 19 
?0011-6-27 9.11 
2011-627 9 14 
2011-6-27 9 1T 
2011-6-27 9$ 20 
2001-11-18 14.04 
2001-11-27 19:54 
2011-6-27 8/43 
2007-11-18 14.04 
2001-11-18 14.04 
2001-11-18 14.04 
2001-11-18 14 04 
2001-11-10 14:04 
2007-11-18 14:04 
2001-11-18 14 04 
2001-11-18 14:04 
2001-11-18 14 04 
2011-6-27 9 22 
2011-6-27 9 22 
2011-6-27 9:23 
2011-627 9:24 
2011-627 9$ 24 
2011-6-27 9.24 


9.1.2 通过 了 lashFXP 上 传 网 站 


FlashFXP 是 一 款 功能 强大 的 上 传 和 下 载 软件 ， 其 使 有 


Dw xc) suo) $50 站 点 () B or Br 
EES »(wjej(zjpe& |oe^e| 
^ 
SQ) dee XMX  200-:3100204 - [O _ MA- shep Cu. 
8 C) Au AFR 2013-3220 654A -~ B win 
SQQ ien XAR 20133-22 10:36. ~ SÕ cona 
WO mà XMX 2033-2 15:23. - m ww 
PO Seipts XE (2013-3220 6:04 ~ mo imgs 
SO stie 文件 去 201322120000 ~ SQ wies 
"B vddgooroche. pho 1b PE X 2011-0-28 9:09 È adigonerao. php 
T pereg ih 203 PP 文件 2011-8-27 10:51 T adigoris. php 
"BO bottos php 1y» PP 文件 20133-21 19.46 T düeibie phe 
Œ cdangeuer pho 1b PHP XT 2007-11-18 14:04 T ahingonggan 
"ES dangeeserpsd php «m» PT 文件 2011-8-27 10:22 "ES cdangeadnin pdp 
T odkuser php 219 PE 文件 2001-11-18 16:00 TŒ cungegoods pho 
"BO cdoeserne php 1b PE 文章 2011-6-29 14.48 "BO canc eser 
T letel. phy 1p PE 文件 2011-6-28 9:13 T chkadin php 
TES mdcoen php 108 FHP 文 种 2007-10-26 11:44 "ES defenlt php 
T hnddé pho GIE PHP 文件 2011-8-27 10:22 T ddetellip pio 
T Sndpwd php 23 PE 文件 2011-6-27 9:4 "ho dde php 
TRO function php 158 PE 文件 2007-11-14 16:05 "B ddetefzhy pho 
T engge php 258 PHP 文件 2013-3-21 21.26 T dletegongga 
"BO gonggaslist. pho 43 PT 文件 2013-3-22 12.53 "ho det php 
T goueul php sys rw 文件 2011-6-27 10:22 "BO deletelesvew. 
T oump TER PE 文件 2011-6-27 10:22 T ddeteingii 
T couwuche. php SI PE 文件 2013-3-21 18:57 T dstesser pho 
T gomun php TIE Pe 文件 2011-8-27 10:22 T donzjimse php 
T higsewch pip AE PE 文件 2011-0-27 10:22 T wditeoagge pòp 
T index php 24MP PP 文件 2013-35-26 11:37 T editgoods phe 
"EOS left aem php SIE PP 文件 2013-3-21 20:57 "RO editlesrevor. 
Œ loput pip 1XP PHP 文件 2006-11-5 16:58 Œ editpingiun pèp 
= lookinfo. php TER PHP 文件 2011-6-27 10:22 "m "REO edituzer php 
a z "(—— pepe anes a a 3 fintat pp 
(Q FE PASAU BN 2011-6-27 9:20 大 小 : m 


图 9-7 上 传 后 的 效果 


日 方 法 简单 ， 并 且 


节 将 介绍 FlashFXP 最 基本 的 功能 ， 即 设置 站 点 和 上 传 网 站 。 具 体 的 操作 步骤 如 下 : 
D 在 应 用 该 软件 之 前 ， 需 要 先 下 载 该 软件 ， 具 体 过 程 不 再 介绍 。 按 照 系 统 提 示 ， 安 装 
完成 后 打开 FlashFXP 软件 ， 如 图 9-8 所 示 。 


FlashFXP 


(02-02-05 20.30.35.918836. fqf 31 KB 
Bookmarks. dat 0 


3 于 
FlashFxp. ini 
FlashFXP, cha 


qnan exe 
PLashFXP Website. VRL 
flashfxp. key 


1 DRAR, 29 Xf, Sit 30 (4.09 Mb / 6.07 GB Sa) 


X; \web\FlashFXP 


2) 选择 菜单 栏 “ 站 点 ”一 “站 点 管理 


理 器 ”对 话 框 ， 如 图 9-9 所 示 。 
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图 9-8 打开 的 FlashFXP 软件 
器 ”命令 ， 或 者 按 (F4〉 快 捷 键 ， 


HA 


[ “站 点 


AX 


L 有 汉化 版 。 本 小 


fes 
H 
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e EE 
uc IT] 
eð FlashFXP 站 点 
designem 
m) ftp. byedu org 
homegen. cn 


I| honegen. com. cn 
| iadebride 


司 | 远程 路 径 Bie 


ee TA 


iH 


| go | ro ] 


图 9-9 “站 点 管理 器 ”对 话 框 


3) 单 击 “新 建站 上 点” 按钮， 打开“ 建立 新 的 站 点 ”对 话 框 ， 在 “站 点 名 称 ” 文 本 框 
中 ， 输 入 站 点 名 称 如 shop， 有 具体 操作 如 图 9-10 所 示 。 


建立 新 的 站 点 


图 9-10 “建立 新 的 站 点 ”对 话 框 


4) 单 击 “ 站 点 管理 器 ”对 话 框 上 的 “常规 ”选项 卡 ，“ 站 点 名 称 ” 已 经 自动 设置 为 上 
一 步骤 定义 的 站 点 名 称 ， 在 “IP 地 址 ” 栏 输入 网 站 指向 的 IP HhHb. 在 “端口 ”文本 框 中 ， 
输入 端口 值 21; 在 “用 户 名 称 ” 文 本 框 中 ， 输 入 登录 服务 器 的 名 称 ; 在 “密码 ”文本 杠 
中 ， 输 入 密码 ， 然 后 单 击 “ 应 用 ”按钮 ， 站 点 就 设置 好 了 。 具体 设置 如 图 9- 11 所 示 。 


E ASEAN 
我 的 电脑 


gm C HER 
OO PRLashFXF 站 点 站 点 名 称 @@) |bjbsj 


adtian IP Hatt QD |220. 113. 15. 16 端口 21 


edpe 用 户 名 称 如 [em.bjbsj.com OESO 
: Je g| sem | 

seseo —— 11 1 | 
ZEHBREGE QD = 


BH sces 
HH www. booksaga com 
www. btvvip. con 


(m) 
a 
m) 
] 
newcpdc ERO 
m 
a 


Bl wew. jeqx. org cn 


www. nylyj. con 
S| xhty 


paru c sm [sso J[ xm ) 


图 9-11 设置 e rH 常规 ” 选项 卡 


5) 单 击 “连接 ”按钮 ， 就 可 以 连接 站 点 了 。 连 接 上 茹 点 之 后 ， 在 本 地 磁盘 上 ， 找 到 要 
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rz 


BW 


上 传 的 站 点 目录 ， 选 中 要 上 传 的 所 有 站 点 文件 ， 然 后 和 


在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


击 上 鼠标 右键 ， 在 弹出 的 快捷 荣 单 中 


~ 


选择 “传送 ”命令 ， 到 这 里 ， 网 站 的 上 传 就 实现 了 ， 具 体操 作 如 图 9-12 所 示 。 


程 空 


f FlashFXP 


ETP 站 点 GD) SAO 队列 @) ATO IAV 目录 如 查看 WV) WR 


DOR 


AZ xui 


sc 


xr p[ea o m aoi a r 
名 称 / 


保存 路 径 V 
PFR 
x 


Ld: 


E 
di am — 08 


226 Transfer 


Ctrl+P 
) Ias 
) CtrltIns 


图 9-12 


0 个 文件 夹 ,0 个 文件 ,总 计 0 (0 FP) 


LA NM 


ory changed to /selfreb 


上 传 操 作 


上 Opening Mose ede data connection for /bin/1z. 


介绍 了 文件 的 上 传 ， 也 许 有 人 该 有 疑问 了 了， 那么 如 何 下 载 呢 ? 用 同样 的 方法 ， 选 择 远 


间 中 的 文件 或 者 文件 夹 ， 单 击 鼠标 右键 ， 


以 将 文件 下 载 到 本 地 计算 机 上 。 


9.2 | 电子 商务 网 站 的 支付 问题 


网 站 在 进行 销售 的 时 候 ， 还 有 一 个 关键 的 环节 ， 那 就 是 客户 如 何 向 商家 六 付 货款 。 现 


在 网 络 的 支付 技术 日 


线 支 付 需 要 通过 与 银行 等 机 构 合 作 才 可 以 实现 。 


择 : 
02 


物 支付 的 过 程 (图 9-13)， 这 


使 月 


一 种 是 到 银行 或 者 邮 


1 支付 宝 的 使 用 


在 弹出 的 快捷 菜单 


PEE ARE” ME, Wen 


益 完 善 ， 想 通过 自己 现成 开发 一 个 在 线 支 付 系统 是 没有 必要 的 ， 因 为 在 


网 站 的 货 球 支付 渠道 ， 宜 从 以 下 两 种 方式 选 


局 柜台 汇款 ， 男 外 一 种 是 通过 第 三 方 支付 或 网 上 银行 在 线 支 付 。 


目前 国内 比较 早 也 比较 成 熟 的 网 站 支付 方式 是 使 用 支付 宝 ， 本 小 节 将 体验 一 下 在 线 购 


昌文 付 宝 的 支付 有 一 个 全 面 的 了 解 。 


具体 的 操作 步骤 如 下 : 


里 模拟 一 个 真实 的 定购 和 支付 实例 ， 希 望 读者 能 通过 该 实例 对 


1) 打开 正 浏 览 器 ， 输 入 淘宝 的 网 址 ;www.taobao.com， 按 下 回 车 键 ， 即 可 登录 淘宝 网 
站 的 首页 ， 如 图 9-14 所 示 。 
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图 9-13 ”购物 支付 流程 


xe SED SEV RRA IAD 帮助 [H 
o7- O- BaO Prr zeaz OQ Q- b 国 - 


IEEE 0 om u a 


MIR | 9048 | x 


WIRE 


首页 BREW 28H REE Ah 促销 WE ER 创意 站 学生 Eit 美容 时 尚 居家 手机 运动 


过 电车 品 48 低 价 
BIRRE 
UEM SIRO 
"ritis 


[BRESMES) s 元 位 全 2009 元 红包 | jTcoXeRERR ÉbDAMOUUZA 


R | 手机 | 数码 | 化 要 品 | 服装 | RR | S9 meaw | uesa | 特价 宝贝 | 


T t 
E 移动 /联通 /电信 充值 卡 网 游 虚 拟 物品 交易 区 彩票 /双色 球 / 大 乐 透 /七 星 彩 <> EA 
N 


M 3b |50 | 100 | 联通 | IP 卡 | skype EE |I| C1] DNF | QQ | aom. 折扣 机 票 | 酒店 | 旅游 线路 | 客栈 


£a Qus 


图 9-14 打开 的 淘宝 首页 


2) 单 击 选择 左上 角 的 “请 登录 ”链接 ， 打 开 用 户 的 登录 界面 如 图 9-15 所 示 ， 直 接 输 


F 


入 用 户 名 和 密码 (新 用 户 需 要 注册 淘宝 帐户 )。 


3) 单 击 “登录 ”按钮 登录 淘宝 网 站 的 会 员 系 统 ， 此 时 在 页 面 的 左上 角 选 择 “ 我 要 买 ” 


“我 要 卖 ”“ 我 的 淘宝 ” 需要 购买 东西 选择 第 一 个 ， 如 果 需 要 通过 淘宝 来 卖 东西 ， 选 择 第 二 


^, 


如 果 是 商家 ， 可 以 选择 进入 自己 的 店铺 ， 选 择 第 三 个 ， 如 果 需 要 查看 购买 到 的 一 些 产 品 


与 其 他 信息 ， 也 可 以 选择 进入 “我 的 淘宝 ”。 这 里 以 购买 为 例 ， 选 择 “我 要 买 ” 进入 购买 页 


面 ， 


如 图 9-16 所 示 。 
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XAO Sb 查看 (V) RRA IAD Maw 


淘宝 同 - 淘 我 喜欢 ! - Microsoft Internet Explorer 


omt- O- d à O P" scs @ A- 国 - 


&tco) El http: flmember! taobao comAneenber login jhtmi?t»top&redirectURL »hftp3634362f962F www 1acbao Com% 2F 


© HARRER? ft ASSCEBDER?T 

o 登录 冤 码 安全 控件 下 载 | 控件 安装 指南 

o 保护 炮 的 客 码 ， 请 阅读 密码 安全 贴 士 | ZARETE 
o RhiERESCRECEDOREFRKPRE , PATRIE. 


+ 
F 便宜 有 好 贷 ? Uuischmaucum. 


丑 卖 更 安心 9 支付 宝 交 易 超 安 全 。 
O saran PUERTA. 
A 起 和 人气 社区 精彩 活动 每 一 天 。 


| scea*uzam( € EX ) 


eT 
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阿里 巴巴 集团 : 阿里 巴巴 同治 - 中 国 站 国际 站 日 文 站 | AEA | LHE | PERA | CRF | 阿里 软件 | 阿里 妈妈 | 集团 研究 中 心 
Copyright 6 2003-2009 Taobao.com 版 权 所 有 


淘宝 同 - HESR? 


图 9-15 会 员 登 录 页 面 


Microsoft Internet Explorer 


Ho Wik SRH REE Ah 促销 ”机票 ”彩票 ”创意 站 FE 


+ Haa / AGED KS/fCa 


rib | 天 龙 八 部 | BAS | SNR | 传奇 元 宝 | dEsIREE | QQ 三 国 
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上 移动 联通 充值 中 心 + 要 讯 QQ 专区 


移动 30 | 移动 50 | 移动 100 | 联通 50 | QQM | QOIS | QQ 秀 | QQE | 
自动 发 货 | Skype 充 值 | 移动 手机 号 码 | 。 UC 等 号 码 | QQ 完 物 及 用 品 | QA | 
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BA ZA EF Eit 8G HÄ 居家 手机 运动 
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| 单程 特价 机 票 | 
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图 9-16 
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4) 根据 顾客 需求 ， 此 页 面 分 成 了 了 虚拟、 数码、 护肤、 服饰、 家居、 文体、 收藏 和 其 他 
几 大 类 产品 频道 ， 并 在 这 之 中 又 分 成 了 若干 小 类 ， 顾 客 可 以 根据 自己 的 需求 ， 选 择 进 入 到 需 
要 的 产品 频道 ， 这 里 以 服饰 为 例 。 选 择 “ 服 饰 ”一 “童装 / 童 娃 /孕妇 装 ” 沫 单 选项 ， 在 打开 
的 界面 中 选择 “ 连 身 衣 / 疏 衣 / 哈 衣 ”， 找 到 需要 的 产品 ， 如 图 9-17 所 示 。 


XM) dép soo 收藏 LA， 工具 ID WA 
ost. Se 


-u15:35.00x 
至 全 国 回 ; Wg: 10.005 ENS: 18.05€ 
ners: M 
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SGESHVERE. : 100.0% v 和 有 人 «ensi menzzeancue. 


店铺 动态 评分 
ei reli doleo 6 


Gu SN: khkkh? , o. 9083 | [ 9083 || 3553 


RXWRDPE: Steine d 
Ut: (EEE e: [e] 
: t RERE Dy met 


BRR: "Ke 


立刻 购买 @@ 加 入 购物 车 Pen 


DREH: 175 件 (到 看 评价 ) 制 余 时 间 : 5 天 06 小 时 
BH : 江苏 南京 AMRUM : 422 次 
ENAN: $N BRAN: 3452 HURR) 


BMC 其 它 男女 款 : 中 性 
, 身高 /阶段 : 70 码 60 码 90 码 95 码 MERIA: 实 拍 有 模特 


图 9-17 将 要 购买 的 产品 


5) 选择 “立刻 购买 ”或 者 “加 入 购物 车 ”按钮 。 如 果 对 产品 十 分 满意 ， 选 择 前 者 ， 如 
果 还 没有 拿 定 主意 ， 选 择 后 者 ， 可 在 与 相应 产品 对 比 之 后 ， 再 做 决定 ， 这 里 选择 前 者 “立刻 
购买 ”， 进 入 购买 页 面 ， 购 买 页 面 里 面包 括 了 图 9-18 所 示 的 五 个 主要 操作 步骤 。 


WABE o MAENE o WAMI o suene o xor | 
图 9-18 ”购买 操作 步骤 流程 图 


6) 首先 需要 确认 购买 信息 ， 其 页 面 如 图 9-19 所 示 。 在 此 页 面 选择 收 货 地 址 并 确定 ; 
同时 确定 购买 信息 ， 这 里 包括 购买 数量 以 及 运输 方式 〈 如 果 购 买 多 件 ， 可 以 通过 跟 商 家 协商 
来 减少 或 者 省 略 运费 );， 最 后 确定 提交 订单 ， 这 里 可 以 选择 用 用 户 名 购买 或 者 匿名 购买 ， 如 
果 选 择 匿名 购买 ， 那 么 购买 产品 后 的 所 有 留言 、 评 价 等 都 为 匿名 。 购 买 信息 审查 无 误 之 后 ， 
按 下 “确认 无 误 ， 购 买 ”按钮 。 

7) 按 下 按钮 后 打开 订单 确认 支付 页 面 ， 该 页 面 如 图 9-20 所 示 。 接 下 来 进行 支付 环 
节 ， 初 次 交易 的 时 候 ， 需 要 把 支付 宝安 装 到 本 地 计算 机 上 ， 并 备份 到 移动 硬盘 或 者 本 地 硬盘 
上 上 保存， 以 防止 丢失 。 这 里 选择 “付款 ”按钮 ， 在 弹出 的 确认 界面 中 输入 自己 的 支付 宝 的 文 
付 密码 ， 确 定 支 付 购买 产品 的 金额 。 
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HTA- ØKER? -Microsoft internet Explorer 


XPO MO V BAA IAD EHD 
o- O- 93 à 6 P»* kraz O A-3 国 - 


淘宝 网 


aln 确认 购买 信息 + 2 HRALA + 3 确认 收费 + 4 ”支付宝 付 蒜 到 卖家 + 5 Om 


MURHA 


© FAZ iX 北京 市 HE MBNATOS—ROUERES)7-4-501€ 
© 使 用 其 它 地 址 


d (可 购 37 件 ) 


《至 北京 ) 


宝贝 和 名称 : 336 售 出 万 伞 日 单 小 老 限 © 快递 公司 : 10.0 元 ( 单 件 宝贝 10.0 元 ， 每 多 一 疾 宝贝 加 收 0.0 元 ) 
造型 有限 AR 连 仁 衣 70.95 码 冲 三 © EMS: 18.0 元 ( 单 件 宝贝 18.0 元 ,每 多 一 件 宝贝 加 收 0.0 元 ) 


ux 
宝贝 单价 : 35.00 元 
qm: 
购买 信息 : 身高 /阶段 ; 90 码 配色 : 
xe, 
付款 方式 : tux D 鲁 各 购买 ( 选择 后 ， 您 对 该 宗 贝 的 出 价 、 留 言 和 评 份 都 格 荐 名 。) 


DER zamazm: 45 x 


DATUR 
(确认 无 议 。 购 买 。， 


[Q 车 有 价格 支 动 ( 包括 运费 ) ， SUTANE, KERRE | 


图 9-19 确认 购买 产品 信息 


F BIFU - Microsoft Internet Explorer 


XAO dA 查看 (由 KEA IAD EMW 
Ot- O- m9 a3 6 P» kirz O A- a 国 - 


地 直 [D) [dii ntp trade tecbeo comtradetietaitrade Rem_cetad rtm?biz_order _ki=26385123063his=faise 


5" 


淘宝 an bl Nr | 


ZORE: 首页 ”我 的 油 宝 ”已 习 到 | 的 宝贝 > 订单 详情 


2. 付款 到 支付 宝 


当前 订单 状态 ， 宝 贝 已 天 下 ， 等 待 付款 。 
您 还 有 6 天 23 小 时 56 分 42 疹 未 完成 本 次 交易 的 付款 ， 迫 则 未 付款 ， 交 易 格 自 动 关闭 。 


C. ES 


订单 信息 收 货 和 物流 信息 


卖家 信息 

ne: acms AD 真实 姓名 : FE 

城市 : 江苏 x 联系 电话 : 0510-66033866 
Asi : 100fyCsina.com,cn SENA X tt E: 100fyOsna.com.en 


| 宝贝 状态 


336 入 出 万 件 日 单 小 老 限 造 型 耻 禹 哈 衣 连 传 衣 70- 
95 码 pens 得 
$Be.xe MEME: oo 


Ë triservice taobao comisupporthelo rtm. 


/ 


图 9-20 确认 支付 页 1 
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8) 付款 


Af 4 < 


等 待 卖 


za 


家 发 货 ， 


售 相符 ， 确 
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通常 根据 地 点 和 运输 方式 的 不 同 ， 等 待 的 时 
不 相同 。 这 里 以 “快递 ”为 例 ， 在 产品 送 上 门 时 ， 我 们 需要 检验 产品 是 否 损坏 或 者 是 否 与 销 
认 无 误 后 再 签收 快递 单子 。 完 成 以 上 操作 之 后 ， 再 登录 淘宝 ， 单 击 页 面 左上 角 的 


间 也 会 有 所 


“我 的 淘宝 ”文字 链接 ， 进 入 “我 的 淘宝 ”页 面 ， 如 图 9-21 所 示 。 


淘宝 同 - IES? 


mo sO xu 收藏 &) IAD 帮助 (中 


Microsoft Internet Explorer 


| Pa kenz e| 0- à M- 


我 的 购物 车 
X ECRIRE 


竞拍 的 宝贝 
3s mms (Rp 


€ d » 


团购 俱乐部 (£7 
买 家 信用 : 6 G 
卖 宗 信用 : 6 G 

您 有 封 新 邮件 ， 请 点 此 处 查看 。 


HEHE 


* 20 元 /月 旺 铺 你 想 要 吗 ? 
* 今天 8765 人 抢 免费 试用 ? 


”促销 活动 


我 的 支付 宝 账 户 : yuheyun_001@163.com 账户 充值 我 的 余额 


v 


交易 管理 | 账户 种 理 


| FIRS 


| *RaE 


* Sunsiselcttor 3t 

* SEHEN SOFRER 买 一 送 一 ? 
"宅男 省 钱 穿 衣 记 秋季 赤身 大 公开 

" 秋冬 女装 充 美 搭配 SHOW 

* 汐 落 办 公 室 女人 包 里 有 啥 秘密 ? 


ETT FHIR) 
最 近 三 个 月 买 入 (6) 


等 待 确认 收 货 (1) 


图 


主要 包括 “我 的 交易 ”“ 我 的 洒 


下 简单 的 介 


“客户 


这 里 。 


“我 的 江湖 


uM 
服务 ”“ 我 要 赚 
品 所 积攒 的 积分 、 


钱 ” 以 及 “友情 链接 ”。 
优惠 卡 券 等 


可 以 通过 它 ( 图 


戏 、 送 礼物 等 进行 互动 。 


€ 账号 L4 fes JE n» 
E uM. 个 人 交易 信 息 、 支 付 宝 帐户 管理 、 
网 站 提醒 等 ， 如 图 9-23 所 示 。 


待 确认 的 收 货 页 


页 面 ， 如 图 9-24 所 示 。 


9-22) 来 跟 其 他 月 
的 “ 淘 帮 派 ” 可 以 了 解 到 更 多 用 户 找到 的 打折 信息 或 者 其 他 信息 


vix) 


9-21 “我 的 淘宝 ” 主 界 面 
[ 湖 ” 和 “账号 


在 “我 的 交易 ”里 面 ， 主 要 包括 “我 是 买 家 ”“ 我 是 卖家 ”“ 信 
通常 ， 我 们 所 有 购买 过 的 记录 、 购 买 积分 产 
， 以 及 做 为 卖家 店铺 的 操作 、 


HP SEIT HJ. 


(SEO | 
| 手机 充值 Lamia | A 


e nen 


iz) 


理 ” 等 功能 项 ， 这 里 做 一 


TEE" 


管理 、 


信 


no 


F 价 等 ， 都 出 现在 


IE 


通过 江湖 ， 加 入 到 喜欢 
。 在 这 里 还 可 以 通过 游 


: 所 有 的 用 户 信息 可 以 通过 此 面板 进行 修改 或 者 确定 ， 包 括 你 的 安全 设 


登陆 邮箱 维 志 


护 以 及 收 货 地 址 、 社 区 信息 、 


9) 进入 “我 的 交易 ”页 面 。 选 择 “ 买 家 提醒 ”中 的 “等 待 确认 收 货 ”文字 链接 ， 打 开 


275 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


要 的 淘 江 湖 - HUM- 淘宝 网 - Wicrosoft internet Explorer 


IO 编辑 (E) SEV KRA IAD 才 助 (中 
Omt- O- à à 6 P** wuz @ -à M- 


li) ttp /janghutacbao comhome htm 


dm rm 
eus 
Ei 


Eu. 团购 俱乐部 (团购 俱乐部 ) 
bin 还 没有 个 性 签名 ， 试 试 在 下 面 输 入 框 中 填写 


ài 5s RERMMA  d5$m:127 REAM: €) 
4 nan AUS 


Qux 系统 消息 :1 应 用 消息 :0 好友 :0 留言 :0 NE:0 


9m mepp å HEX FEDA 周边 动向 a- 


国 unm 
Sex 


互动 应 用 .)  0NNG) (SE) 
k- e rtemet 


图 9-22 “我 的 江湖 ”频道 内 容 


THE Fd - Microsoft Internet Explorer 
文件 (日 dip 查看 (由 R&A IAD WR 


Q5- O- O Pnr kenz © A-8 国 - 
BHEO) |É htp ,memberl taobao.comimember/tresh/account, security htm 


_ 您 好 ， DORES? [退出 ] MAR 


用 于 车 录 帐户 ， 不 可 更 多 


用 于 登录 帐户 和 找 回 客 码 


手机 号 码 : 用 于 和 登录 帐户 ， 手 机 找 回 密码 和 开通 手机 服务 


上 次 登录 时 间 : 加 果 交 在 党 时 间 没 有 车 录 过 淘宝 ,请 点 击 这 里 


博客 (个 人 空间 ) 


AE 描述 状态 


登录 密码 安全 性 高 的 密码 可 以 使 帐 导 更 安全 。 密 码 最 好 包 合 数字 和 字母 ， 长 度 超 过 6 位 。 SURE: 


安全 保护 问题 通过 设置 安全 保护 问题 ,以 便 您 在 记 密 码 或 密码 恋 次 职 的 时 候 可 以 快速 的 找 回 。 | 未 设置 


图 9-23 “账号 管理 ”页 面 


/ 
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人 上 了 


Xi SAO EEV RRA IAD Wo 
LEICHT Ibid A Lait 


rm 0c -—-—— 0000007 


淘宝 网 so zu 


我 的 四 物 车 宝贝 名 称 : 成 交 时 间 : 从 [ js wea: 
- 已 买 到 的 宝贝 EUR: zats: [ExENx 国 sars: 
"RBS: Cm.) 


a 


A) SEU RRP 80980. EX TERR CHEER EAE E 1506200 3EMESIQO E TL. HERES EUR 


宝贝 单价 (元 ) 数量 SE * 卖家 交易 状态 实 付款 (元 ) — 评价 


Ld ITMS : 2605626705 成 时 间 : 2009-10-30 01:0 


一 元 拘 ? 卡 哇 伊 车 毕 花边 黑 100 1 ig 
底肥 白 小 图 点 点 七 分 袖 上 家 


图 9-24 ”等 确 认 收 货 页 面 


100 选择 “等 待 确认 收 货 ” 菜 单 ， 根 据 交 易 订 单 编 号 找到 产品 。 确 定 无 误 后 选择 “ 确 
认 收 货 ”， 从 而 进入 “确认 收 货 ”页 面 ， 如 图 9-25 Drs. 


WURF Microsoft Internet Explorer 


XO SO HEV ao IAD Wieso 
Qst- O- 3 à 6 Pn? zaz e 2-a 国 - 


地 直 [D) [M rttocitrace t00c00.comtradeicontrm. 90095 remiz order. kde 26065267 068b. 1y06200 


淘宝 网 


娩 的 位 置 : G> RAMIE) MURE 


我 已 收 到 货 ， 同 意 支付 宝 付款 


订单 信息 


DAS —uet euswisura EO) Basta 
VES 


iTi : 2605625705 
XH€XY89: 2009103045192476 


to caden Olga 


io EB 北京 市 Us MENERO—ERUEEEDA FEZ, 13241978210, 01081517438, 101121 


* 2009-10-30 01:30:10 


图 9-25 确认 收 货 页 面 
11) 再 次 确认 信息 后 ， 输 入 文 付 宝 的 文 付 密码 ， 如 图 9-26 所 示 。 
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E] 
XPO SO HV EA IAD WES 


Ot- O- BaO P"* kuz @ | 全 -各 国 - 


MUF - Microsoft internet Explorer 


MEO |i nap-wroae toco0.ccmtrade/contrm. goocs hter"tiz, ceder jd 26065257065hu. 1yoe«200 


| FI küb PWItLZREEOB6 669 


M e 


zum: 1.004 
TARG: 2605626706 
XH€XBS: 2009103045192476 
RFR: cadehu AD 
:o 北京 tD AE ADARI- ERCUSEISU--01E , FEZ, 13041878210, 010-81517433, 101121 


; 2009-10-30 01:30:10 


，。 请 收 到 贷 后 ， 再 确认 收 贷 ! 否则 你 可 能 钱 贷 两 空 ! 
。 如 果 您 想 申 请 退 款 ， 滞 点 击 这 里 


请 给 入 支付 宇 账 户 支付 国友 4， [meeen IMROGEWDTHER. 


图 9-26 输入 支付 宝 支 付 密码 


12) 单 击 “ 确 定 ” 按 钮 ， 完 成 支付 步 又 。 交 易 成 功 后 ， 弹 出 的 “交易 成 功 


”界面 如 


9-27 所 示 。 为 了 双方 合作 愉快 ， 写 下 对 店铺 和 产品 的 评价 ， 提 高 双方 的 信用 程度 。 


MESH ZERIE? - Microsoft Internet Explorer 
XAO dp HEV ARA IAD 帮助 ID 


Qe- 0-4 3a 6 P"* *«sz- e 2- & 国 - 


ito) am Arade ta0b90 comrade Ar ada success htm?alpay no«2009103045192476$ seller. 1206820235036681 4 li sx us Ho HN 四 


exti ROSS | SEQ | 社区 


mex 我 要 付款 交易 管理 我 的 支付 宝 


1 确认 购买 信息 + 2 村 就 到 支付 室 + 了 MURE + VA. x HIER dE - 5 双方 互相 评价 


交易 成 功 ! 


©@ 交易 已 经 成 功 ! 卖家 周 杨 将 立即 收 到 您 支付 的 货款 。 


O aa) 


RCE 7 WSKPREUUSTRBEV,UNUTTCONGNMESTS. STY 


ES aA 


NOHUGEBL LIBRE HORS LE ORE 38 82 


E 


15.0 


VR] 


9-27 交易 成 功 页 下 
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13) 单 击 “ 给 对 方 评价 ”按钮 ， 打 开 的 评价 页 面 如 网 9-28 所 示 ， 开 始 进行 相应 的 评 
价 ， 确 认 后 选择 “确认 提交 ”。 


LELE 33 HN t uer 


Xo RAO MY ZWA IAD  Wbeo 
O=- 0O- MMO 记 krer O A-E 


HRAD) [di reo srate trovao eller Jeimi?traceiD« 2606526706 5returnR. hp% 3A WF% Ftrade tacbao com'saFtradeSFtemistisorist olz ssi wig aso NS 四 


DEA E s U zane Ei 
EZ 


4 5 双方 互相 评价 


T x 
- 已 买 到 的 宝贝 Q 评 从 需 和 (2009-2.15 日 开始 实行 : 
SA | 请 炮 根 舌 本 次 交易 ， 结 巴 真 袜 、 客 观 、 他 给 增 评 价 。 炮 的 评价 格 是 其 地 合 员 的 参考， 也 格 影 响 恬 家 的 从 用。 


. 累积 值 用 HHR: PUETIES , IBESECRSOPROUEURFIE , MAREA T. 每 个 目 然 月 中 ， 相 同 买 案 和 赤 家 之 间 的 值 用 评价 计 分 不 
超过 6 分 。 评价 后 30 天 内 ， 您 有 一 次 机 会 其 隙 结对 方 的 中 评 或 竹 评 ， 或 者 族 改 成 好 评 。 


. eel 计 分 规则 : 让 由 评分 是 匿名 的 。 ETORRA, IFXSXOTICUSERNWUOIHSRZSRUTMENISKR. WERL 
功 后 无 法 修改 。 


THREE cadehui REZE., GE, MENL : 
WFA: [MNA EETA EHER http: [/forum.taobao.com/forum-170/show. thread---- 
baal anii 22917791-,htm 


一 元 拍 f Kok E CR 
白 小 图 点 点 七 分 袖 上 家 


HTH- WEER? -Microsoft internet Explorer 


ZO So HEV KRA IAD Whw 

ome- O- MAO Prr zez O 2-5 国 - 
地 址 [D) | 入 retn irate lacbao comremarkSeter jemi? 

1o, MAAF?! DEH) AAR 


DERA © SöS 


委 的 交易 ROLA 账号 管理 


4 EHIHEARE + ,5. 双方 互相 评价 

anto - : - á 
~ 已 买 到 的 宝贝 Q 评价 须知 ( 2009.2.15 日 开始 实行 ) : 
L 请 您 根据 本 次 交易 ,给予 真实 、 才 观 、 生 组 地 评价 。 米 的 评价 格 是 天 地 会 员 的 参考 也 格 影 响 实 容 的 全 用 。 


竞拍 的 宝 内 
2. RRMA 计 分 规则 : 中 评 不 计 分 ,但 会 影响 类 家 的 好 评 率 ,请 慎重 结巴。 每 个 自然 月 中 ,相同 买 家 和 卖家 之 间 的 值 用 评价 计 分 不 
eU Mj 超过 5 分 。 评价 后 30 天 内 ， IU RS BEST UID DUA , IEHRUDNUL, | 


ied 计 分 规则 : METALES. GTBMBEO,HEXSOqUESEI[NORMRTATHARICECREDIUS. ROTE 
功 后 无 法 修改 。 


店铺 评分 成 功 ! 信用 评价 成 功 1 个 ! 
继续 努力 ， 再 得 到 5 个 好 评 就 允 升 到 2 心 驼 ! 
双方 互 评 后 需 等 待 30 分 钟 才能 看 到 已 评 过 的 宝贝。 
(DEREAT tese 


. 查看 我 自己 的 信用 状况 ; 

. 查看 对 方 ( caidehui) 的 信用 状况 

. ETEINEN. SER EGUUÜ. 
. 我 要 秀一 秀 我 刚 买 的 宝贝 。 


图 9-29 ”交易 评价 成 功 页 面 
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经 验 分 享 : 


“我 的 淘宝 ”管理 项 目 中 有 查看 “成 功 的 订单 ” 


的 功能 ， 单 击 “ 成 功 的 订单 ”后 会 显示 你 


所 有 成 功 交易 的 记录 (图 9-30 )。 这 样 可 以 统计 你 的 所 有 钱 数 ， 及 时 核对 自己 的 账目 。 


XAO dic HvV Ka IAD 
om- 0- NMO Prr zraz O A-3 国 - 


地 址 (D) n http:/trade taobao comtradeftermiistist bought, Items htm 


Lou] 


EZME - Microsoft internet Explorer 


ij Eb ws B HN mn 


mcer A 


(zn k 


3g) * P9) sos 


ij 使 用 帮助 


ROLA 三 号 侣 理 


宝贝 名 称 : 成 交 时 间 : 从 [ 


(PESEL 


] pers: [$8 li 


RSUR: 


交易 状态 : [交易 成 功 


ETD| 


mang: [$89  |- 


ROER 
EINE 
我 的 积分 
我 的 忧 惠 卡 券 

me I 

卖家 中 心 新 

我 要 卖 

已 卖 出 的 宝贝 

RAER 

出 售 中 的 宝贝 
仓库 用 的 宝贝 

免费 开店 


所 有 订单 FHIR FAU ERP 


宝贝 
订单 编号 : 2602543395 
p 


订单 编号 : 2345776834 


HE pug PERGREG 
ES iEn SKG 
#911712 $ 

ne: 加 图 ”尺码 : 42 


UA FREH] HME 
便宜 三 利 健康 生物 羊毛 线 


Ni e 


390 1 


Q B AREA , SOVI EX EUER CETERO , SEU TE 


需要 评价 
单价 (元 ) 数量 SE 秀 


成 交 时 间 : 2009-10-29 12:11 
9200 1 iE a xu 


v= 
保障 卡 


成 交 时 间 : 2009-09-02 12:03 


E] meme: [£9 — |: 


E BRAAF SR, EON ORS eR 
成 功 的 订单 HLTA 


卖家 交易 状态 实 付款 (元 ) 。 评价 


Im 
交易 成 功 102.00 XC 
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投诉 


交易 成 功 
P 


图 9-30 成功 订单 交易 历史 记录 


9.22. ”使 用 第 三 方 支付 


种 支付 方式 。 
所 谓 第 三 方 广 付 ， 就 是 一 些 和 网 站 创办 所 在 国 


方 选 购 商品 后 ， 使 
行 发 货 ， 买 方 检验 物品 后 ， 就 可 以 通知 付款 给 卖家 ， 


通过 上 面 步 又 的 操作 ， 读 者 对 第 三 方 支付 已 经 有 了 一 定 的 了 解 ， 下 二 


具体 介绍 一 下 这 


家 以 及 国外 各 大 银行 签约 、 并 具备 一 定 实 
力 和 信誉 保障 的 第 三 方 独立 机 构 提 供 的 交易 文 持平 台 。 


在 通过 第 三 方 支付 平台 的 交易 中 ， 买 


第 三 方 平 台 提 供 的 账户 进行 货款 文 付 ， 由 第 三 方 通知 卖家 货款 到 达 、 进 


第 三 方 再 将 款项 转 至 卖家 账户 。 


同样 当 第 三 方 是 除了 银行 以 外 的 具有 良好 信誉 和 技术 支持 能 力 的 某 个 机 构 时 ， 支 付 也 


通过 第 三 方 在 持 卡 人 或 者 客户 和 银行 之 间 进行 。 持 


m 


外 子 数据 的 形式 《例如 邮件 ) 传递 账户 信息 ， 这 种 做 法 避免 了 持 卡 人 将 


FE 人 首先 和 第 三 方 以 替代 银行 帐号 的 茶 种 


民 行 信息 直接 透露 给 


商家 ， 另 外 也 可 以 不 必 登 录 不 同 的 网 上 银行 界面 ， 而 取而代之 的 是 每 次 登录 时 ， 


对 熟悉 和 简单 的 第 三 方 机 构 的 界面 。 


都 能 看 到 相 


第 三 方 机 构 与 各 个 主要 银行 之 间 又 签订 有 关 协 议 ， 使 得 第 三 方 机 构 与 银行 可 以 进行 某 


种 形式 的 数据 交换 和 相关 信息 的 确认 。 这 样 第 三 方 机 构 就 能 实现 在 持 卡 人 或 消费 者 与 各 个 银 
行 ， 以 及 最 终 的 收 藉 人 或 者 商家 之 间 建 立 一 个 支付 的 流程 。 


280 


第 9 章 ， 电 子 商务 网 站 管理 与 维护 | 


图 9-31 所 示 为 某 游 戏 的 在 线 支 付 界 面 ， 该 页 面 中 列 出 了 很 多 种 在 线 支 付 的 方法 。 
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图 9-31 在 线 支付 方法 
目前 中 国 国内 的 第 三 方 文 付 产 品 主要 有 PayPal (易趣 公司 产品 )、 文 付 宝 (阿里 巴 


巴 )、 财 付 通 (腾讯 公司 ， 腾 讯 拍 拍 )、 快 钱 (完全 独立 的 第 三 方 支付 平台 )、 百 付 宝 (百度 
C2C)、 环 迅 支付 以 及 汇 付 天 下 ， 其 中 用 户 数量 最 大 的 是 PayPal 和 支付 宝 ， 前 者 主要 在 欧美 


过 PayPal 支付 一 笔 金额 给 商家 或 者 收获 人 ， 可 以 分 为 以 下 几 个 步骤 : 


国家 流行 ， 后 者 是 阿里 巴巴 旗下 的 产品 。 


另外 ， 中 国 银 联 旗 下 的 银联 电子 文 付 也 开始 致力 于 第 三 方 支付 ， 其 实力 不 容 小 视 。 通 


D 只 要 有 一 个 电子 邮件 地 址 ， 付 款 人 就 可 以 登录 开设 PayPal 账户 ， 通 过 验证 成 为 其 用 


户 ， 并 提供 信用 卡 或 者 相关 银行 资料 ， 增 加 账户 金额 ， 将 一 定数 额 的 款项 从 其 开户 时 登记 的 
账户 “例如 信用 卡 ) 转移 至 PayPal 账户 下 。 


20 当 付款 人 局 动向 第 三 人 付款 的 程序 时 ， 必 须 先 进入 PayPal 账户 ， 指 定 特定 的 汇 出 金 


额 ， 并 提供 收 蒜 人 的 电子 邮件 账号 给 PayPal. 


予 收 藉 人 。 


Er 


3) 接着 PayPal 向 商家 或 者 收 蒜 人 发 出 电子 邮件 ， 通 知 其 有 等 待 领取 或 转账 的 款项 。 
4) 如 果 商 家 或 者 收 蒜 人 也 是 PayPal 用 户 ， 其 决定 接受 后 ， 付 款 人 所 指定 之 款项 即 移 转 


5) 若 商 家 或 者 收 坎 人 没有 PayPal 账户 ， 由 必须 按照 PayPal 电子 邮件 的 内 容 指 示 链 接 


5 点 进入 网 页 注册 取得 一 个 PayPal 账户 ， 收 鞭 人 可 以 选择 将 取得 的 款项 转换 成 文 票 寄 到 指 
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定 的 处 所 、 转 入 
9.2.3 即时 汇款 支付 
通过 银行 或 邮局 柜台 汇款 ， 从 而 达到 


过 
[d 


化 dp 
页 A, 


文 付 的 目的 ， 这 是 现实 


个 人 的 信用 卡 账 户 或 者 转 入 另 一 银行 账户 。 


FP 最 保险 的 支付 方 


式 。 目 前 最 方便 的 方法 
示 为 某 网 站 提示 的 汇款 方式 。 在 这 里 提 到 的 银行 卡 账号 ， 


就 是 在 网 页 上 的 适当 位 置 ， 留 下 商家 的 专 月 


银行 卡 账号 。 图 9-32 所 
通常 选择 比较 大 的 银行 ， 例 如 : 中 


国 建设 银行 、 中 国 工 商 银行 、 中 


汪 如 何 付费 -如 何 付费 -~ icrosoft Internet Explorer 
i 文件 中 RuD so wmo IRV Hy inte 


Oa: O- nid 6 Ps y 062-5 6-L3 


iat an http://www. xytedu. con/about/fufei/ 


国 农业 银行 、 中 国 农村 商业 银行 等 。 


CO 中 公教 育 
H CN MPA 辅 导 
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DE ii] 


免费 资料 


wm 


FER: GGR. 333. 39€. T18. 732. 808. iMi, 114. 11649)8H2DOA T EPOR ; 


s 报名 流程 


次 光电 话 : 010-62750314 , 62750975, 62750976 ; 
习 广 册 与 报名 工作 时 间 : 9:00 一 17 : 0, MA. AFRA: 
Easil 


2. iC 


习 maye 


Pimp cm 
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aou 
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图 9-32 


在 确认 订购 后 
交 钱 一 手 交 货 。 


9.24 网 银 在 线 支 付 


， 做 到 货 到 付款 的 方式 。 对 于 一 些 比较 贵 习 


提示 支付 的 方式 


EE 的 产品 ， 宜 送 货 上 门 ， ~ 可 


网 上 银行 ， 是 任何 创办 网 站 的 人 都 非常 关心 的 问题 。 网 上 银行 的 特点 就 是 方便 、 快 


捷 ， 
FERIHA 


问题 一 : 什么 是 网 上 银行 ? 
网 上 银行 ， 是 指 银 行 通过 电脑 和 互联 网 (或 其 他 公 月 


省 去 很 多 繁琐 的 过 程 ， 商 家 们 如 果 要 想 快 速 的 完成 货 


币 支 付 ， 可 以 选择 使 用 网 上 银行 。 


F 办 网 上 银行 的 一 些 基 础 知识 介绍 给 大 家 ， 采 取 问 答 的 形式 做 具体 的 介绍 。 


处 理 系统 。 它 是 一 种 全 新 的 业务 渠道 和 客户 服务 平台 
到 全 天 候 、 跨 地 域 的 银行 服务 。 
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问题 二 ;使 用 网 上 支付 安全 吗 ? 

网 上 支付 是 通过 国内 各 大 银行 的 支付 网 关 进 行 操作 的 ， 采 用 的 是 国际 流行 的 SSL 或 
SET 方式 加 密 。 安 全 性 是 由 银行 方面 负责 的 ， 是 完全 有 保证 的 。 网 银 在 线 不 收集 用 户 的 信 
用 卡 资料 。 当 用 户 需 要 填写 信用 卡 资料 时 ， 实 际 上 已 经 到 达到 银行 的 支付 网 关 。 所 以 ， 用 户 
不 必 担 心 信用 卡 资料 会 经 过 网 上 银行 在 线 而 泄露 出 去 。 


|^. A NE 
2 


为 了 安全 起 见 ， 用 户 最 好 不 要 在 公共 场合 输入 信用 卡 信 息 ， 以 防 被 他 人 看 到 您 的 卡号 
及 密码 。 如 果 需 要 得 到 更 多 与 “网 上 支付 安全 ”方面 有 关 的 信息 ， 可 以 直接 与 您 的 发 卡 行 联 
系 。 使 用 的 支付 平台 ， 所 支持 的 卡 种 ， 最 好 使 用 SSL128 位 加 密 算法 和 SET ( 安全 电子 交 
易 ) 协议 ， 以 及 使 用 PKI ( 公 铀 基础 设施 ) 作为 网 银 在 线 的 在 线 支 付 网 。PKI 把 公 钥 密码 和 
对 称 密 码 结合 起 来 ， 在 Internet 上 实行 密 钥 的 自动 管理 ， 保 证 网 上 数据 的 机 密 性 、 真 实 性 、 
完整 性 和 不 可 抵赖 性 ， 从 而 进一步 地 加 强 了 网 上 支付 的 安全 性 。 


问题 三 ， 在 线 支 付 目 前 支持 哪些 卡 种 ? 

就 目前 来 说 ， 网 上 银行 还 在 进一步 的 发 展 阶段 。 现 在 全 国 以 及 各 地 的 银行 ， 并 不 是 所 
有 卡 种 都 支付 网 上 银行 支付 的 。 我 们 将 支持 网 上 支付 的 银行 整理 成 表 9-1， 供 网 站 管理 者 
开办 的 时 候 参考 。 


Hr 


39-1 支持 网 上 支付 的 银行 


支持 卡 种 开通 方式 适用 地 区 
工商 银行 牡丹 灵通 卡 柜台 申请 /网 上 开通 全 国 
工商 银行 牡丹 信用 卡 柜台 申请 /网 上 开通 全 国 
工商 银行 牡丹 借 记 卡 柜台 申请 /网 上 开通 全 国 
招商 银行 一 网 通 /专业 版 网 上 开通 支付 全 国 
招商 银行 信用 卡 /一 卡通 网 上 开通 全 国 
中 国 银行 长 城 信 用 卡 无 需 申请 广州 上 海 
中 国 银行 借 记 卡 无 需 申 请 上 海 
建设 银行 龙卡 信用 卡 网 上 开通 全 国 
建设 银行 龙卡 > 500 柜台 申请 ，< 500 网 上 申请 全 国 签约 客户 
民生 银行 民生 卡 无 需 申请 全 国 
民生 银行 签约 客户 无 需 申请 全 国 
农业 银行 金 穗 信用 卡 / 借 记 卡 无 需 申 请 全 国 
浦发 银行 东方 信用 卡 / 借 记 卡 无 需 申 请 广州 地 区 
交通 银行 太平 洋 信用 卡 网 上 开通 广州 上 海 
交通 银行 太平 洋 借 记 卡 网 上 开通 广州 上 海 
邮政 邮 储 借 记 卡 无 需 申 请 广东 地 区 
农村 信用 合作 社 农 信和 银联 储蓄 卡 柜台 申请 广州 地 区 /上 海地 区 
福建 兴业 银行 兴业 银联 卡 无 需 申 请 广州 地 区 
深圳 发 展 银行 发 展 卡 网 上 开通 全 国 
光大 银行 阳光 卡 / 借 记 卡 无 需 申请 全 国 
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CE) 
支持 卡 种 开通 方式 适用 地 区 
中 信和 实业 银行 信用 卡 /理财 宝 卡 无 需 申请 全 国 
中 信和 实业 银行 借 记 卡 柜台 申请 广州 地 区 
广东 发 展 银行 信用 卡 / 借 记 卡 无 需 申请 全 国 
商业 银行 羊城 借 记 卡 无 需 申 请 广州 地 区 
华夏 银行 借 记 卡 无 需 申 请 全 国 
问题 四 : 支付 过 程 麻烦 吗 ? 


通过 网 上 银行 在 线 支 付 平台 ， 在 线 支 付 是 很 方便 、 快 捷 的 。 只 需要 在 网 银 平台 上 ， 选 
择 使 用 者 所 持 卡 银行 和 卡 种 ， 就 可 以 到 银行 后 台 文 付 了 ， 整 个 过 程 上 只 需 几 分 钟 。 

问题 五 ， 使 用 网 银 在 线 文 付 平 台 ， 进 行 在 线 支 付 的 条 件 是 什么 ? 
消费 者 持 有 网 银 在 线 支 付 ， 支 持 的 在 线 文 付 银行 卡 种 中 的 一 种 银行 卡 ， 并 且 此 卡 已 经 
开通 网 上 银行 的 在 线 支 付 服务 。 

问题 六 : 如 何 申请 网 上 银行 服务 ? 

申请 网 上 银行 服务 可 以 持 本 人 有 效 证 件 和 银行 卡 ， 到 相应 银行 的 营业 网 点 ， 办 理 申请 
网 上 银行 服务 的 相关 手续 ， 也 可 到 相应 的 银行 网 站 ， 在 线 申 请 网 上 银行 服务 。 值 得 注意 的 
是 ， 有 些 银行 要 求 在 线 申请 后 ， 本 人 持 有 效 证 件 和 银行 卡 到 银行 柜台 签约 ， 才 能 开通 在 线 文 
付 等 网 上 银行 的 全 部 服务 ， 具 体 细节 请 查看 银行 帮助 中 相应 银行 的 帮助 文档 。 
问题 七 : 在 线 支 付 要 在 消费 者 银行 卡 上 扣除 手续 费 吗 ? 
网 银 在 线 所 得 手续 费 ， 是 从 商户 那儿 扣除 的 ， 不 在 消费 者 的 银行 卡 上 扣除 任何 费用 ， 
银行 在 消费 者 的 银行 卡 中 ， 扣 除 的 仅仅 是 消费 者 购买 的 商品 或 服务 的 售 价 。 

问题 八 :首次 使 用 网 银 在 线 文 付 的 消费 者 ， 应 注意 哪些 问题 ? 

D 首先 查看 持 有 的 银行 卡 是 否 符合 在 线 文 付 的 条 件 ， 即 此 卡 是 否 是 网 银 文 持 的 卡 种 ， 
此 卡 是 否 具 有 在 线 支 付 的 功能 等 。 

2) 为 确保 网 上 文 付 安全 操作 ， 务 必 到 相应 的 银行 网 站 下 载 专 区 ， 进 行 DE128 位 高 加 密 
包 下 载 。 


经 验 分 享 : 

付款 方式 除了 上 面 介 绍 的 网 上 银行 支付 、 邮 局 汇款 、 银 行 汇款 、 第 三 方 支付 等 ， 还 包 
括 货 到 付款 、 手 机 短信 支付 以 及 其 他 形式 的 网 上 付款 。 为 了 方便 顾客 付款 ， 在 实际 操作 
中 ， 应 该 给 出 多 种 选择 ， 不 要 只 接受 一 种 支付 方式 ， 因 为 这 样 很 可 能 会 导致 顾客 感觉 不 便 
而 失去 成 交 机 会 。 当 然 ， 一 般 情 况 下 ， 不 推荐 使 用 货 到 付款 的 方式 ， 原 因 很 简单 ， 即 增加 
了 自己 的 经 营 风险 。 


9.2.5. 在线 支 付 的 功能 


对 于 网 站 建设 者 而 言 ， 创 办 购物 网 站 后 一 般 需 要 申请 域名 和 空间 ， 网 站 要 备案 ， 之 后 
做 购物 网 站 的 程序 ， 上 传 后 网 站 才能 正常 运行 。 其 中 ， 在 购物 网 站 程序 开发 时 实现 在 线 文 付 
功能 是 比较 简单 的 ， 一 般 使 用 第 三 方 支付 的 支付 宝 或 者 做 个 简单 的 链接 到 在 线 网 银 进 行文 
付 ， 本 小 节 将 介绍 一 下 实现 这 两 种 支付 的 方法 。 
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1. 在 线 网 银 支 付 

在 线 网 银 文 付 是 一 种 比较 简单 的 方法 ， 一 般 就 是 先 开通 网 银 账 户 ， 然 后 在 网 站 做 一 个 
文 付 链接 即 可 ， 具 体 的 实现 步骤 如 下 : 
1) 首先 ， 需 要 办 理 一 个 网 上 银行 的 账户 ， 比 较 好 的 网 上 支付 的 银行 是 “招商 银行 ”和 
“中 国 工 商 银行 >”， 这 个 账户 本 人 必须 亲自 去 银行 开通 ， 去 了 直接 跟 柜 员 说 要 开通 网 上 银行 账 
户 ， 银 行 会 问 有 没有 这 个 银行 的 储蓄 账户 ， 如 果 没 有 的 话 就 得 办 一 张 储蓄 卡 ， 网 上 银行 的 账 
户 都 是 跟 用 户 的 储蓄 账户 挂 义 的 。 

2) 在 办 理 好 储蓄 卡 后 ， 再 填写 一 张 网 上 银行 账户 申请 单 ， 交 给 银行 ， 其 间 银 行 会 要 求 
用 户 输 入 支付 密码 ， 查 询 密码 ， 按 照 顺 序 办 理 就 好 。 建 议 把 支付 密码 跟 查 询 密码 设置 成 不 
样 的 密码 。 

3) 接 下 来 在 网 站 的 在 线 文 付 页 面 上 加 入 链接 即 可 ， 本 书 实例 在 gouwusuan.php 页 面 加 
入 实现 支付 的 文字 链接 ， 如 图 9-33 所 示 。 


Dw BH». 2v. à 
文件 (F) 编辑 (E) SEV 插入 (I) AM ”格式 (0) 命令 (C) 站 点 (5) BIO) 帮助 00 


gouwusuan. php X PERONA es 
QED top.php left menu php bottom. php 
代码 | 拆 分 [ 设计 ]| 实时 视图 | y. O. M p E, c 


标题 SAETTA 。 | 


adni 
8-3 
€ — BO e 
> <table> <tr> <td> <table> orm) <tr> <td> <div> <a> [k] Q 100% v m m (N] 758 x 368v © images 
Be E Fe a m- upinages 
[Omm] ERO x x] 类 | 无 v Br 王 导 此 此 标题 [| T addgonggao php 2 
|meTUETUT dex. j = !/— addgoods. php T 
B css no: 图 ENTSEETNTNEMSESUUED:v| Q0) RRO Y Th oadüeibiep — y 
丘 三 | 单元 格 KFORU w|X€0| | 不 换行 0) 背景 颜色 G) | .|errrrrr & s J 


| 
| 
日 期 : 2013-3-10 21:46 


四 | 默认 v &oD| zs 


图 9-33 ”加 入 支付 链接 文字 


4) 提供 了 商家 开通 的 网 银 银行 供 选择 之 后 ， 如 单 击 “ 中 国 工商 银行 文 付 ” 即 可 链接 到 在 
线 支 付 登 录 网 页 ， 地 址 为 https://mybank.icbc.com.cn/icbc/perbank/index.jsp， 如 图 9-34 所 示 。 
5) 购物 者 在 输入 用 户 名 和 密码 以 及 验证 码 后 即 可 登录 后 台 进 行文 付 。 


2. 支付 宝 支 付 
实现 支付 宝 在 线 支 付 的 功能 相对 网 银 而 言 会 肪 烦 些 ， 用 户 首 先 要 到 银行 办 理 一 个 文 付 
宝 ， 然 后 到 支付 宝 网 站 申请 相关 的 服务 ， 之 后 才 可 以 使 用 该 功能 ， 有 具体 的 实现 步骤 如 下 : 
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A 中 国 工商 银行 新 一 代 网 上 银行 - Nierosoft Internet Explorer DOR 
XPD RED SEV BEWA IAT HHW ELI 
om- O- naO sx zer 6 2-3 

地 址 0) [dE] https: //nybank. icbe. con. en/icbe/perbank/index. jsp < 输入 关键 词 搜索 Era um Osna m 


工行 首页 
SEULS BERE UBI 1024768 举例 ) 可 获得 最 佳 使 用 效果 


CBCA) 中 国 工商 银行 。 个 人 网 上 外 有 金融 @ 家 


1 系统 公告 : 工行 手机 门户 (ar) 随时 、 随 地 体验 移动 全 融 服务 


ROOT ER nO (x PPA * as 
网 上 银行 自 助 注册 


HARPA) 个 人 网 上 银行 登录 | 


BRhsdsFl RES | 办 卡 ( 账 ) 号 /用 户 名 : 找 回 用 户 名 
自助 注册 在 洪 卡 密码 量 置 | zsa: — —— 


存折 版 登录 
手机 根 行 〈 WAF ) 自助 注册 


FURT CERO 自助 注册 您 使 用 网 上 银行 ， 须 阅读 并 遵守 《中国 工商 银行 电子 银行 章程 》、《 中 国 工商 良 行 电子 银行 个 
Fna kS AXPESOU) M CPETISIRGA-AFLEIRGTERAR. ,加 您 使 用 贫 宾 版 个 人 网 上 银行 还 须 
认 阅读 并 得 守 《中 国 工商 良 行 贵宾 版 个 人 网 上 根 行 服务 须知 》。 


“理财 综合 服务 


重要 得 杂 了 如果 您 是 第 一 次 在 本 计算 机 上 使 用 同上 银行 ,请 使 用 网 良 助 手 进行 必要 的 安装 设置 。 


| E p Internet 


图 9-34 打开 的 工商 银行 在 线 网 银 登 录 页 面 


1) 首先 ， 同 样 需要 到 银行 办 理 一 个 支付 宝 账 户 ， 如 “中 国 工 商 银行 ”和 “中 国 建设 银 
行 ”。 这 个 也 必须 亲自 去 银行 开通 ， 办 理 时 要 说 清 是 个 人 办 的 小 型 个 人 网 店 ， 还 是 商家 办 的 
支付 宝 ， 如 果 是 以 公司 名 义 办 理 还 要 记得 带 上 公司 的 一 些 手续 。 办 理 后 银行 会 给 用 户 一 张 文 
付 宝 银行 卡 ， 图 9-35 所 示 为 办 理 的 个 人 支付 宝 卡 。 


图 9-35 ”办理 的 个 人 支付 宝 卡 


2) 打开 支付 宝 的 在 线 开通 业务 网 站 https://www.alipay.com/， 如 图 9-36 所 示 。 
3) 可 以 根据 自己 的 需求 向 支付 宝 申请 在 线 支 付 业 务 ， 也 可 以 根据 自己 的 需要 定制 “ 收 
球 服 务 ”。 如 这 里 的 “商家 服务 ”只 需要 单 击 “网 银 文 付 ”文字 链接 即 可 ， 如 图 9-37 所 示 。 
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支付 宝 提供 了 详细 的 单 笔 阶 梯 费 率 ， 见 表 9-2。 


表 9-2 支付 宝 价格 及 服务 期 限 表 


单 笔 阶 梯 费 率 
服务 名称 预 付费 交易 流量 费 ox 服务 期 限 
0 一 6 万 元 1.296 
6 万 元 一 50 万 元 1.0% 
单 笔 阶梯 费 率 0 元 50 万 元 一 100 万 元 0.996 1 年 
100 万 元 一 200 万 元 0.8% 
200 万 元 以 上 0.7% 


(5 


4) 在 网 上 定制 后 ， 文 付 宝 技术 工程 师 会 在 产品 订单 通过 审核 后 的 2 个 工作 日 内 联系 用 
户 ， 为 用 户 的 网 站 免费 进行 技术 集成 ， 也 就 是 说 只 需要 将 制作 的 需要 进行 支付 的 页 面 让 他 们 
帮忙 集成 就 可 以 了 。 集 成 后 即 可 上 传 到 服务 器 空间 进行 使 用 。 


9.3 | 选择 物流 配送 的 方法 


网 站 在 经 营 的 时 候 都 会 遇 到 这 样 的 问题 ， 如 何 把 产品 送 到 全 国力 至 全 世界 的 朋友 那里 
呢 ? 这 就 需要 物流 来 帮忙 ， 常 用 的 物流 有 平邮 、EMS、 民 营 快递 、 汽 运 、 铁 路 运输 和 空运 
等 。 下 面 详细 分 析 几 种 国营 物流 方式 的 特点 和 注意 事项 。 

9.3.4. 国营 物流 的 选择 
国营 物流 ， 就 是 中 国 邮 政 提供 的 服务 ， 适 用 范围 为 中 国 大 陆地 区 ， 基 本 上 有 人 的 地 方 
都 可 以 送 到 。 

(1) 平邮 

优点 : 适用 于 中 国 大 陆地 区 ， 只 要 有 人 的 地 方 都 可 以 到 达 ， 而 且 价格 便宜 。 

缺点 : 平邮 比较 慢 、 物 件 容易 丢 、 取 件 麻 烦 ， 无 法 网 上 跟踪 邮件 下 落 。 

运费 计算 : 

按 中 国 邮政 普通 包 囊 资费 标准 执行 《实际 费用 = 包 囊 资费 +3 元 挂号 费 + 保 价 费 +0.5 元 单 
据 费 )， 以 包 于 重量 每 500g 为 计算 单位 ， 不 足 500g 的 按 500g 计算 。 首 重 费 用 为 6 元 
/500g， 续 重 费用 各 地 区 不 同 。 

(2) 普通 快递 

优点 : 网 点 多 。 
缺点 : 邮费 相对 别 的 快递 公司 的 贵 ， 虽 然 时 间 承 诺 的 是 10 天 内 邮寄 到 ， 但 实际 时 间 也 
说 不 准确 ， 常 常 花 了 快递 的 钱 ， 却 是 得 到 平邮 的 速度 ， 并 且 邮 局 工作 人 员 不 派送 邮件 ， 需 要 
带 身份 证 去 邮局 取 件 。 

运费 计算 : 
适用 范围 为 中 国 大 陆地 区 ， 在 中 国 邮政 快递 包 里 资费 标准 基础 上 ， 包 于 资费 打 七 折 
(实际 费用 = 包 庄 资费 x0.7+3 元 挂号 费 + 保 价 费 +0.5 元 单据 费 ， 订 购 时 系统 显示 费用 为 实际 费 


E 


(d 
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Ho, BRAE 1000g 为 一 个 计算 单位 ， 续 重 以 每 S00g 为 计算 单位 ， 不 足 500g 的 按 500g 计 
算 。 邮 费 为 10 元 /1000g， 续 重 费 用 各 地 区 不 同 。 

(3) EMS 

优点 : 速度 快 ， 网 点 多 ， 全 国 各 地 基本 都 能 到 。 还 有 一 点 ， 基 本 不 丢 件 。 可 以 上 网 查 
询 ， 送 货 上 门 ， 物 品 安 全 有 保障 。 

缺点 : 价格 较 贵 ， 包 装 和 运单 都 要 单 算 钱 。 

运费 计算 : 

按 中 国 邮政 EMS 快递 标准 执行 ， 即 包 囊 重量 在 500g 内 收 20 元 ， 超 过 部 分 每 递增 500g 
按 所 在 地 区 不 同 收费 标准 不 同 : 山东 、 北 京 、 和 天津、 河北、 内蒙古、 山西、 辽宁、 河南、 
林 、 安 徽 、 江 苏 、 黑 龙 江 、 陕 西 、 上 了 上海、 湖北、 浙江、 甘肃、 江西、 湖南、 福建、 四川 、 
庆 收 6 元， 宁夏、 青海、 广东、 贵州 、 广 西 、 云 南 、 海 南 收 9 元 ， 其 它 地 区 收 15 元 。 不 足 
500g 的 按 500g 计算 (如 果 该 费用 超过 29 元 ， 按 七 折 男 加 2 元 单据 费 收取 ， 即 实际 收取 费 
用 = 应 收费 用 x0.7+2 元 单据 费 ， 订 购 时 系统 显示 费用 为 实际 费用 )。 

(4) E 邮 宝 

E 邮 宝 是 中 国 邮 政 集团 公司 与 支付 宝 最 新 打造 的 一 款 国内 经 济 型 速递 业务 ， 专 为 中 国电 
TR 采用 全 程 陆运 模式 ， 其 价格 较 普 通 EMS 有 大 幅度 下 降 ， 大 致 为 EMS 的 一 
半 ， 但 其 享有 的 中 转 环境 和 服务 与 EMS 几乎 完全 相同 。 

优点 : |, 可 以 到 达 国 内 任何 范围 ， 运 输 时 间 短 ， 只 比 EMS 慢 1 Xv. aAA 
航空 禁 寄 品 ， 派 送 上 门 ， 网 上 下 订单 ， 有 邮局 工作 人 员 上 门 取 件 ， 时 间 为 当天 早上 5:00— 
11:30 下 订单 ， 下 午 可 取 件 ， 中 午 11:30 一 19:30 下 订单 ， 次 日 早上 取 件 。 

缺点 : 部 分 地 区 还 没有 开通 此 项 目 。 


90.32 经济 的 民营 快递 


民营 快递 就 是 指 民营 私有 企业 创办 的 物流 公司 ， 资 费 一 般 定价 为 : 首 重 8 元 /1 公斤 ， 
续 重 6 元 /1 公斤 。 赔 付 的 方式 为 丢失 赔付 : 无 保价 ， 赔 付 金额 小 于 等 于 1500 元 ， 有 保价 ， 
保价 率 是 1%， 赔 付 金 额 小 于 等 于 10000 元 ; 破损 赔付 的 方式 为 : 无 保价 ， 赔 付 金 额 为 3 一 5 
倍 赔 运费 ， 有 保价 ， 保 价 率 是 1%， 赔 付 金额 小 于 等 于 10000 元 。 

优点 : 价格 便宜 ， 速 度 在 3 一 4 天 内 。 

缺点 : 网 点 不 够 广泛 ， 侦 尔 有 于 件 等 情况 ， 员 工 素质 因 人 而 蜡 。 


0.3.3 ”空运 物流 的 特点 


空运 的 运费 一 般 是 按 重 量 算 ， 到 各 个 不 同 的 城市 价格 也 不 统一 。 不 同 的 空运 代理 价格 
也 不 一 样 。 当 然 有 一 个 最 低 标准 ， 没 达到 的 按 最 低 标 准 算 。 如 果 货 物 比较 多 的 话 ， 可 以 多 找 
几 家 公司 ， 让 他 们 提供 报价 ， 以 供 选择 ， 而 且 有 的 公司 也 会 愿意 免费 上 门 提货 。 

优点 : 是 几 种 物流 方式 中 最 快 的 ， 寄 急 件 时 可 以 考虑 。 

缺点 : 费用 较 高 ， 且 会 因为 天 气 原 因 取消 航班， 所 以 要 慎重 选择 。 


9.3.4. 选择 物流 注意 事项 
如 何 选择 放心 的 好 物流 呢 ? 快递 公司 的 规定 一 般 是 最 多 赔偿 运费 的 2 倍 ， 也 就 是 说 20 


4 


[ 


ce 
由 
man 
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元 。 若 是 发 货 为 贵重 物品 ， 万 一 损坏 或 丢失 ， 就 补偿 最 多 20 元 。 学 习 必 要 的 网 站 物流 知 
识 ， 可 以 为 我 们 赢得 最 大 的 保障 。 通 常 ， 和 物流 公司 打交道 主要 从 保价 和 货品 验收 两 个 环节 
入 手 即 可 。 

保价 : 

这 种 方式 是 可 以 按照 网 站 保价 的 金额 来 赔偿 的 ， 但 是 保价 费 要 收取 百 分 之 三 ， 比 较 
贵 。 有 时 网 站 卖家 挣 得 的 利润 都 没有 保价 的 费用 高 ， 所 以 填写 保价 的 也 不 是 很 多 ， 而 且 保 价 
都 是 在 买 家 没有 签收 的 情况 下 才 会 赔偿 ， 如 果 是 买 家 没有 先 验 货 ， 直 接 签 收 了 货品 的 话 ， 那 
快递 公司 就 不 会 负 任何 责任 ， 可 见 保价 的 效果 。 

货品 验收 : 
快递 员 一 般 不 会 让 买 家 先 验 货 。 这 主要 是 因为 网 上 有 很 多 网 站 创办 者 ， 售 出 的 商品 与 
网 站 页 面 中 的 图 片 不 符 ， 质 量 差 ， 若 是 买 家 先 验 货 的 话 ， 很 可 能 要 拒 收 ， 但 是 货品 已 经 开 
包 ， 再 返回 给 商家 的 话 ， 商 家 又 不 会 承认 ， 照 样 可 以 投诉 快递 ， 快 递 公司 只 能 是 两 边 不 捞 
好 。 验 收 的 方法 有 两 种 : 

一 是 买 家 仔细 检查 货品 的 外 包装 ， 查 看 外 包装 是 否 有 拆 开 的 痕迹 ， 外 包装 是 否 完 好 无 
损 。 买 家 要 是 想 先 验 货 再 签收 ， 可 以 写 一 张 证 明 外 包装 完好 无 损 的 纸 条 ， 以 证 明快 递 公司 的 
清白 。 

二 是 买 家 可 以 联系 网 站 商家 ， 由 商家 再 联系 快递 公司 ， 然 后 通过 三 方 的 沟通 ， 让 买 家 
先 验 货 。 但 这 种 验 货 方式 ， 到 最 后 很 可 能 还 是 需要 写 上 面 提 到 的 证 明 ， 所 以 这 种 方式 是 比较 
浪费 时 间 的 ， 总 归 就 是 要 写 个 证 明 外 包装 完好 无 损 的 纸 条 才 可 以 验 货 。 不 过 也 有 例外 ， 就 是 
那个 快递 员 自 己 不 熟练 快递 业务 知识 ， 不 知道 有 写 证 明 才 可 以 验 货 这 一 点 ， 或 是 直接 同意 你 
仿 贷 ， 或 是 彻底 不 可 以 验 货 。 


9.4 | 网 站 的 售后 服务 策略 


售后 服务 在 销售 中 占有 极其 重要 的 位 置 ， 不 要 忽略 它 的 存在 。 例 如 在 网 络 上 ， 如 果 顾 
客 觉得 受到 了 冷落 ， 那 他 告诉 的 不 是 1 个 人 ， 有 可 能 会 是 几 百 个 人 。 所 以 要 用 更 多 的 时 间 ， 
来 树立 恨 好 的 信誉 口碑 ， 不 但 要 提供 顾客 所 需 的 ， 还 要 有 良好 的 服务 态度 。 现 今 的 客户 关系 
管理 ， 不 是 和 过 去 一 样 仅仅 依赖 销售 人 员 的 个 人 魅力 ， 而 是 必须 依赖 协调 整合 的 行动 ， 由 过 
去 被 动 地 收集 客户 资料 ， 转 为 建立 主动 关怀 的 顾客 关系 。 能 和 否 在 第 一 时 间 解 决 客户 的 需求 问 
题 ， 在 很 大 程度 上 决定 了 商家 能 否 获得 客户 的 信任 。 

在 经 营 的 过 程 中 ， 网 站 商家 在 平常 要 做 到 如 下 的 售后 服务 准备 : 

D 畅通 的 电话 联系 。 

2) 及 时 的 资讯 传达 。 

3) 周到 的 咨询 服务 。 

4) 快速 的 系统 维护 服务 。 

5) 贴心 的 问候 释疑 。 

6) 意外 的 惊喜 礼物 。 
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9.41 网 站 顾客 的 满意 度 


顾客 满意 度 主 要 涉及 三 个 方面 : 顾客 的 


与 方式 。 


顾客 对 于 产品 或 服务 的 期 望 值 


Wr 


起 着 关键 性 的 作用 ， 


顾客 


期 望 值 、 产 品 和 服务 的 质量 、 
很 高 ， 顾 客 的 期 望 看 
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服务 人 员 的 态度 
E 顾 客 对 卖家 的 产品 以 及 服务 的 判 


将 他 们 所 要 的 或 期 望 的 东西 与 他 们 1 


行 对 比 ， 以 此 评价 购买 的 价值 。 


此 ， 


找 一 


力 。 这 些 管理 
怨 和 不 信任 。 因 


抱怨 。 这 主要 表现 在 : 
1〉 服 务 态度 差 。 不 尊敬 顾客 ,缺乏 礼貌 ! 语言 不 当 ， 
2) 缺乏 正确 的 推销 方 
2). 对 顾客 爱 理 不 理 ， 独 自 忙 平 自己 
3) 缺乏 专业 知识 。 无 法 回答 顾客 的 提问 ， 或 是 
过 度 推销 。 过 分 夸大 产品 与 


可 以 用 公式 简单 地 


1. 


一 般 情 况 下 ， 当 


卖家 应 该 适度 地 管理 顾客 的 期 望 ， 若 管理 
管理 顾客 期 望 值 的 失 


CD 


我 们 要 拒绝 承诺 过 多 或 者 过 度 的 推销 ， 
一 个 例子 ， 例 如 有 的 网 上 商 
些 理由 来 搞 塞 或 者 拒 


顾客 的 期 望 值 


表示 : 顾客 的 满意 度 = 


顾客 的 


E 


RE 


承 话 过 多 与 过 度 


EH 


期 望 值 越 大 时 ， 购 买 产品 的 欲望 就 越 大 。 但 是 当 
过 高 时 ， 就 会 使 得 顾客 的 满意 度 越 小 ， 顾 客 的 期 望 值 越 低 时 ， 顾 客 的 满意 度 相 对 就 越 大 。 


顾客 的 实际 感受 /顾客 的 期 望 值 


要 体现 在 两 个 方面 : 


(2) 


在 广告 中 过 分 地 宣传 产品 的 茶 些 性 能 ， 故 意 忽 


虚假 广告 信息 


2. 产品 和 服务 质量 


在 产品 和 服务 质量 上 


绝 。 


1) 产品 本 身 存在 的 问题 ， 


2) 产品 的 包装 问题 


3) 产品 出 现 小 瑕 症 。 
4) 顾客 没有 按照 说 明 操作 ， 而 导致 出 现 故 障 。 


3. 客服 人 员 的 态度 
为 顾客 提供 产品 服务 ， 缺 乏 正确 的 推荐 技巧 和 工作 态度 ， 都 将 导致 顾客 的 不 满 ， 产 生 


4) 


X. 


因为 这 样 会 使 顾客 产生 # 
家 承诺 包 退 包 换 ， 但 是 


会 存在 如 下 的 不 足 : 


质量 没有 达到 规定 的 标准 。 
， 导 致 产品 损坏 。 


顾客 的 期 望 


失误 ， 就 容易 导致 顾客 产生 抱怨 。 


民 大 的 反感 。 
旦 顾客 提出 退 商品 或 者 换 商 品 时 ， 总 是 


FE 在 购买 或 者 享受 的 东西 进 


2:5 


简单 地 举 


略 一 些 关键 的 信息 ， 转 移 顾客 的 注意 
上 的 失误 ， 导 致 顾客 在 消费 过 程 中 ， 有 失望 和 反感 的 感觉 ， 因 而 产生 一 定 的 抱 
此 ， 要 坚决 反对 虚假 广告 。 


中 计 ， 强 迫 顾 客 购买 。 


的 事情 ， 言 语 冷淡 ， 似 乎 有 意 


答 非 所 问 。 


j 词 不 准 ， 引 起 顾客 误解 。 
缺乏 耐心 ， 对 顾客 的 提问 或 要 求 表示 烦躁 ， 不 情愿 ， 不 够 主 


已 顾客 赶 走 。 


AC 


服务 的 好 处 ， 引 诱 顾 客 购买 ， 或 有 意 设立 


Fs 


在 
X 


， 让 顾客 
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9.4.2 正确 处 理 顾 客 意见 


好 的 服务 ， 首 先 必 须要 有 好 的 服务 态度 ， 因 


尽力 去 满足 客户 的 


期 望 ， 


H 
是 想 


Ach Er 
LE 
pU 


1. 处理 顾 客 抱怨 的 原则 


顾客 就 是 上 帝 ， 顾 客 始终 


正确 。 这 是 非 


为 服务 来 自 内 心 。 好 的 服务 第 一 必须 尽心 


方 设 法 去 超越 客户 的 期 望 。 


常 重要 的 观念 ， 有 了 这 种 观念 ， 就 会 有 平和 的 


心态 来 处 理 顾客 的 抱 忽 。 这 包括 三 个 方面 的 含义 : 


1) 应 该 认识 至 


2) 对 于 顾客 上 
3) 尽 可 


|. A 


抱 忽 和 不 满 的 顾客 是 对 卖家 有 期 望 的 顾客 。 


2. 如 果 顾 客 有 误 ， 请 参照 第 一 条 原则 


在 顾客 与 卖家 的 沟通 过 程 


的 抱怨 行为 应 该 给 予 肯 定 、 鼓 励 和 感谢 。 
能 地 满足 顾客 的 要 求 。 


中 ， 常 常会 因 


t 
, 


与 顾客 进行 全 


3. 处 理 顾 客 抱 怨 的 策略 与 技巧 


(1) 首先 必须 重视 顾客 的 抱怨 
当 顾 客 投 诉 或 抱怨 时 ， 不 要 忽略 任何 一 


原因 


为 存在 沟通 障碍 而 产生 误解 ， 即 便 如 此 ， 不 要 


否则 会 失去 了 潜在 的 顾客 。 


个 问题 ， 


因为 每 个 问题 都 可 能 有 一 些 深层 次 的 


。 顾 客 抱 外 不 仅 可 以 增进 卖家 与 顾客 之 间 的 沟通 ， 而 且 还 可 以 诊断 卖家 的 内 部 经 营 与 管 
理 所 存 在 的 问题 ， 从 而 利用 顾客 的 投诉 与 抱 扰 ， 来 发 现 我 们 的 不 足以 及 需要 改进 的 地 方 。 
(2) 详细 的 分 析 顾 客 抱怨 的 原因 


比如 一 个 顾客 在 某 商 场 购物 ， 他 对 所 购买 的 产品 基本 满意 ， 但 是 他 发 现 了 一 个 小 问 


题 ， 提 出 要 求 替 换 ， 但 是 售 
更 多 的 


Sk b, figit 


Hf a 


4e m 
页 Ul 


ARLA 


我 们 要 引 以 为 戒 。 
(3) IER 


AE Ei ju b 


外、 及 时 地 解决 问题 
对 于 顾客 的 抱怨 应 该 及 时 正确 地 处 理 


, 


让 顾客 感到 


己 没 有 受到 足够 的 重视 。 例 如 ， 


发 现 主要 原因 
法 ， 而 不 能 简 


Hj 


TET BUE SE FEARS TA, ACIE INL REESE ATUBUERAEE IE P^ hh, VRBE IE 


FOU 5 BOX. T THER, 


E2 fh, KEFR DLP mE UE 


的 服务 态度 问题 ， 而 不 是 产品 的 质量 问题 。 在 实际 操作 


3 


拖延 时 间 只 会 使 顾客 的 抱怨 变 得 越 来 越 强烈 ， 
顾客 抱怨 产品 质量 不 好 ， 卖 家 通过 调查 研究 ， 
的 使 用 方 
然 卖家 没有 责任 ， 但 这 样 也 会 失去 很 多 顾 


EH 
nj 


rd 


HR 


客 。 如 果 经 过 调查 ， 发 现 产 品 


实 存在 问题 ， 


IR] 


(4) 记录 顾客 抱怨 与 解决 的 情况 


EX 


对 于 顾客 的 抱怨 与 解决 情况 ， 要 做 好 记录 ， 并 且 


现 的 问题 ， 对 于 产品 
是 出 ， 对 工作 人 员 加 强 


理 部 门 
(5) 追踪 调查 


处 理 完 顾客 的 抱怨 之 后 ， 应 与 顾客 积极 沟通 ， 
法 ， 以 增加 顾客 对 卖家 的 忠 
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JA H 


应 该 给 予 赔偿 ， 并 尽快 告诉 顾客 处 理 的 结果 。 


进行 定期 总 结 。 在 处 理 顾客 抱怨 中 发 


教育 与 培训 。 


诚 度 。 


问题 ， 应 该 及 时 通知 生产 方 ， 对 于 服务 态度 与 技巧 问题 ， 应 该 向 管 


了 解 顾客 对 卖家 处 理 问题 的 态度 和 看 
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9.5 | 电子 商务 网 站 安全 防范 


电子 商务 网 站 的 经 
做 好 售后 服务 这 些 关 键 ] 


防范 两 个 核心 工作 。 


营 是 整 天 和 电脑 打交道 ， 在 了 解 了 网 络 文 付 、 产 品 的 物流 配送 以 及 


[ 作 之 外 ， 在 空余 时 间 还 要 做 好 最 后 一 个 工作 ， 那 就 是 做 好 网 站 安全 
防范 工作 。 安 全 防范 工作 主要 分 为 自身 使 用 的 电脑 的 安全 防范 和 网 站 所 托管 的 服务 器 的 安全 


9.5.41 维护 电脑 的 安全 设置 
操作 电脑 的 安全 设置 主要 是 指 给 自己 的 电脑 进行 安全 设置 ， 对 使 用 电脑 的 安全 设置 我 


们 总 结 为 如 下 的 经 验 。 


一 杀 : KRR ARH 


F 定 期 查 毒 。 


二 锁 : 给 使 用 的 电脑 “上 锁 ”。 
ZRF: 养 成 恨 好 的 上 网 习惯 。 


四 清 : 及 时 清空 系统 临时 文件 。 


1. 安装 杀毒 软件 定期 查 毒 

现在 的 电脑 使 用 时 一 般 都 会 装 上 杀毒 软件 ， 市 场 上 的 杀毒 软件 很 多 ， 首 先 推荐 国产 的 
杀毒 软件 ， 因 为 国产 的 杀毒 软件 的 界面 是 中 文 ， 方 便 大 家 操作 ， 购 买 和 维护 也 比较 容易 。 现 
在 国产 的 杀毒 软件 主要 有 瑞星 、 金 山 毒霸 、 江 民 、360 等 。 杀 毒 软件 的 安装 步骤 比较 简单， 


WEISE SCHRITTE 


了 ， 


购买 的 正版 的 杀毒 软件 都 有 详细 的 安装 步骤 。 


这 里 介绍 瑞星 在 安装 后 的 配置 方法 ， 具 体 的 操作 步骤 如 下 : 
1) 最 新 版 的 瑞星 安装 后 的 界面 如 图 9-38 所 示 。 


| 杀毒 


设置 可 疑 文件 上 报 软件 升级 


电脑 防护 瑞星 工具 [安全 资讯 | 


S 在 线 服务 ORAE : 400-660-8866) 
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2) 单 击 界面 上 的 “杀毒 ”选项 卡 ， 打 开 的 “杀毒 ”窗口 如 图 9-39 所 示 ， 这 里 可 以 设 
置 “ 全 盘 杀 毒 ”的 处 理 方法 。 


快速 查 杀 全 盘查 杀 自 定 义 查 杀 


今日 尚未 发 现 病毒 ， 黑 计 查 杀 病 毒 : 0 个 
电脑 防护 黑 计 阻止 入 侵 攻 击 : 5 次 
查看 日 志 〈 上 一 次 扫描 时 间 : 1 分 钟 以 前 》 


尚未 有 病毒 文件 锌 隔 高 
查看 病毒 也 宫 区 


安全 小 提示 : 经 常 执行 快速 查 杀 可 以 有 效 防 止 您 的 电脑 该 病毒 侵害 。 


e ERBES (RARS: 400-660-8866) 程序 版 本 : 23.00.73.40 已 是 最 新 ) 


图 9-39 设置 杀毒 模式 


3) 单 击 “ 电 脑 防护 ” 选 卡 ， 打 开 图 9-40 所 示 的 窗口 ， 这 昌 
部 打开 ， 这 样 就 可 以 有 效 地 保护 本 地 电脑 。 


需要 将 所 有 的 防御 功能 全 


na 


e X > 
C 瑞星 杀 盏 软件 


设置 可疑 文件 上 报 软件 升级 


U 和 防护 
木马 防御 
浏览 器 防护 


办 公 软 件 防 护 
E" 当 您 全 用 Offce、WPS、PDF 等 办 公 软 件 时 ， 
(9 


-AT RRR 
Aim Gert. 


gg 系统 内 核 加 固 


D ERBES (RAA: 400-660-8866) 


图 9-40 ”防御 设置 
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2. 给 使 用 的 电脑 “上 锁 ” 


使 用 的 电脑 如 果 不 设置 任何 开机 密码 ， 就 等 于 是 家 里 开 着 门 让 小 偷 进 来 偷 东 西 。 设 置 


电脑 的 开机 密码 主要 有 两 种 方式 : 一 种 是 在 开机 BIOS. 里 面 设置 密码 ， 男 外 一 种 就 是 简单 的 


设置 操作 系统 的 登录 密码 。 这 里 介绍 操作 系统 的 登录 密码 的 设置 方法 。 


1) 设置 开机 密码 ， 首 先 要 选择 “开始 ” 沫 单 ， 然 后 选择 “设置 ”一 “控制 面板 ” 命 


令 ， 如 图 9-41 所 示 。 


indons Catalog 
V] Windows Update 


Q exesoaneua 


BEC 
m 
RS 


控制 面板 
© Rind QD 

D FEMER Œ) 

B EREM FH SO D 


帮助 和 支持 Q0 


运行 R)... 


注销 NB... 


回国 üe 


Windows XP Professional 


KAH U... 


图 9-41 选择 “控制 面板 ”选项 


2) 打开 “控制 面板 ”后 ， 双 击 “ 用 户 帐 户 ” 选 项 ， 如 图 9-42 所 示 。 


i xq) deg) 查看 WY) KEU IAW HHW 


iQ. O- d Ds ions | 国 


KT 打印 机 和 其 它 硬件 
ww 


.w MPEP 


LI 
g 日 期 、 时 间 、 语 言 和 区 域 设置 


e ©) 声音 、 主 音 和 音 锋 设备 


pe temer 
v 


图 9-42 打开 的 “控制 面板 ” 


3) 打开 “用 户 帐 户 ” 面 板 ， 如 图 9-43 所 示 。 
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| 文件 四” 编辑 人 FEV EW IAD HHU 
|Qm- O- ds zrn |T 


; tit 0 [D mee 


$ MPP 


选择 一 个 任务 ... 
B) ERKP 
B) 创建 一 个 新 帐户 
B) EZRM 
或 选择 一 个 控制 面板 图 标 


ELIT Ë, 邮件 


图 9-43 “用 户 账户 ”面板 
fF“ 更改 帐户 ”选项 ， 打 开 图 9-44 所 示 的 “挑选 一 个 要 更 改 的 帐户 ”面板 。 


4) Hd 


相关 任务 
挑选 一 个 要 更 改 的 帐户 

Tw HB z Guest ` 

F mew Eg HUSER e 来 宾 帐 户 没有 启用 


图 9-44 选择 “挑选 一 个 要 更 改 的 帐户 ” 
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5) 单 击 当 前 工作 的 帐户 名 ,打开 的 帐户 管理 面板 如 图 9-45 所 示 。 


您 想 更 改 您 的 帐户 的 什么 ? 


更 改 我 的 名 称 


更 改 我 的 密码 


正在 删除 你 自己 的 帐户 M 


切 热 用 户 
使 用 一 个 . NET Passport 更 改 我 的 图 片 
更 改 我 的 帐户 类型 


设置 我 的 帐户 使 用 一 个 NET Passport 


图 9-45 打开 的 帐户 管理 面板 


6) 然后 单 击 “ 更 改 我 的 密码 ”选项 ， 打 开 更 改 面 板 ， 设 置 好 密码 后 ， 单 击 


fj", 如 图 9-46 所 示 。 


Es 更 改 您 的 密码 
ETOR- MEHER 
m 


正在 记 住 一 个 密码 


如 果 浆 的 密码 包 合 大 写字 母 ， 您 必须 在 每 次 登录 时 用 同样 的 方式 输入 。 
输入 一 个 单词 或 短语 作为 密码 提示 : 


所 有 使 用 这 各 计 算 机 的 人 都 可 以 看 见 密码 提示 。 


E 
z 


图 9-46 设置 新 密 
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这 样 


机 密码 就 设置 好 了 ， 


以 后 每 次 开 


工作 中 间 要 离 


要 输入 开机 密码 。 
3. 养 成 良好 的 上 网 习惯 


经 营 网 站 肯 
中 病毒 。 养 成 良好 的 上 网 习惯 ， 


Hm, n 


(OD 预防 第 一 


定 是 需要 


机 登录 的 时 候 ， 都 会 
以 同时 按 下 (Wint) Aet, 


锁定 屏幕 ， 继 多 


经 常 上 网 的 ， 但 是 网 络 上 的 垃圾 东西 也 越 来 越 多 ， 
能 够 起 到 很 好 的 防护 作用 。 


会 要 求 输入 


KER 


开机 密码 ， 如 果 
作 的 时 候 ， 仍 需 


一 不 小 心 就 会 


系统 补丁 要 及 时 打 。 微 软 补丁 虽然 多 ， 出 来 得 也 比较 慢 ， 但 是 大 部 分 是 很 有 用 的 ， 所 
以 建议 打上 。 

(2) 得 到 保护 

最 好 安装 一 个 病毒 防护 软件 。 

(3) 定期 扫描 你 的 系统 

如 果 是 第 一 次 启动 防 病毒 软件 ， 最 好 让 它 扫 描 一 下 你 的 整个 系统 。 干 净 并 且 无 病毒 问 
题 地 启动 你 的 电脑 是 很 好 的 一 件 事情 。 通 常 ， 防 病毒 程序 都 能 够 设置 成 在 计算 机 每 次 启动 时 
扫描 系统 或 者 在 定期 计划 的 基础 上 运行 。 一 些 程序 还 可 以 在 连接 到 互联 网 上 时 在 后 台 扫描 系 
统 。 定 期 扫描 系统 是 否 感 染病 毒 ， 最 好 成 为 你 的 习惯 。 

(40 更 新 防 病毒 软件 

既然 安装 了 病毒 防护 软件 ， 就 应 该 确保 它 是 最 新 的 。 一 些 防 病毒 程序 带 有 自动 连 ps 
互联 网 上 ， 并 且 只 要 软件 厂商 发 现 了 一 种 新 的 威胁 就 会 添加 新 的 病毒 探测 代码 的 功能 ， 还 
以 查找 最 新 的 安全 更 新 文件 。 


(5) 不 要 轻易 执行 附 


收 到 


eA 可 能 会 


Bb 件 时 经 常 有 些 


月 去 


MERGE 


DOC. XLS 等 附 伯 
染 ; 如 有 €€ 


机 病毒 。 


CD 不 要 直 
对 于 文件 扩 


Ji: 


带 来 不 可 预测 


件 中 的 EXE 和 COM 等 可 执行 程序 


\ 须 进行 检查 ， 
C60 不 要 轻易 打 


FFB 


e A 


文档 ， 


动 启用 Word 或 Excel. 


要 直接 打 
fts 


(8) 和 警惕 发 送出 去 的 


是 否 启 用 宏 ” 的 提示 


接 运行 附件 
展 名 很 怪 的 附件 ， 或 者 是 带 有 
， 一 般 可 以 删除 包含 这 些 附件 的 


Ns 那 绝 对 不 要 轻易 打开 ， 


脚本 文件 
BT WE, 


对 于 
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ui 


B4 


己 往外 传送 的 
计算 机 病毒 相当 


陌生 人 发 过 来 的 | 


如 *.VBS、 


a 


子 邮件 


中 的 可 执行 程 


1H 件 ， 这 些 附 件 极 有 可 能 带 有 计算 机 病毒 或 是 黑客 程序 ， 轻 易 运 
的 后 果 。 对 认识 的 朋友 或 者 
确定 无 异 后 才 可 使 用 。 

} 件 中 的 文档 文件 

对 方 发 送 过 来 的 电子 邮件 及 相关 附件 的 文档 ， 首 先 要 用 “另存 为 … 


”命令 保存 到 本 地 


WR 


如 


鼠标 直接 六 
附件 中 有 计算 机 病毒 则 会 


PPAR 


否则 极 有 可 


能 传染 上 i 


立刻 传 


包子 邮件 计算 


* SHS 等 的 附件 ， 千 万 不 
以 保证 计算 机 系统 不 受 计算 机 病毒 的 


附件 ， 也 一 定 要 仔细 


检查 ， Uii 


旧 只 要 防护 得 当 当 


定 无 毒 后 ， 才 可 发 送 。 
， 还 是 完全 可 以 如 免 传染 上 计算 机 病毒 的 


4. 及 时 清空 系统 临时 文件 
随 着 电脑 的 使 用 ， 系 统 的 临时 文件 会 越 来 越 大 ， 越 积 越 多 ， 影 响 运 行 速 度 ， 并 且 临 时 


文件 又 是 很 多 病毒 喜欢 隐藏 的 地 方 ， 定 期 清理 临时 文人 
电脑 的 运行 速度 恢复 正常 。 


清理 | 


俐 时 文件 的 步骤 如 下 : 
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FF， 不 仅 可 以 清理 垃圾 文人 


FE， 还 可 以 让 


1) 双击 打开 IE 浏览 器 ， 单 击 选择 菜单 栏 中 的 “工具 ”一 “Internet 选项 ”命令 ， 如 
9-47 所 示 。 


2) 1] 


F about:blank — Nicrosoft Internet Explorer 


i D saD EEV o E «ooo ift an 


O=- © 国 国 的 | rawr D| 2-96 " Eon 


i HE QD | dE) about:blank Fm e. 


Yindors Update QD 


Yindows Messenger 
AE ro SEO 


定 ”按钮 ， 临 时 文件 删除 完毕 ， 如 图 9-49 所 示 。 


Inte 


r 主 页 


rnet 选项 


可 以 更 改 主 页 。 
i 
使 用 当前 页 O | | 使 用 默认 页 @) | | PATENG) 


广 Internet 临时 文件 
ue pa ER Internet 页 存 售 在 特定 的 文件 去 中 ， 这样 可 以 


BRcxcur] ED SE ] | 


六 历史 记录 


“Hist 


RE axm on. [i E) [汪汪 历史 记录 0 


[meg [rim ]( ER. ] RE. 


图 9-48 ”设置 “常规 ”选项 卡 


图 9-47 选择 “Internet 选项 ” 


[JF "Internet 选项 ”对 话 窗口 ， 单 击 “ 删 除 文件 ”按钮 ， 如 图 9-48 所 


3) 打开 “删除 文件 ”对 话 框 ， 单 击 选 择 “ 删 除 所 有 脱 机 内 容 ” 复 选 枉 ， 再 单 击 “ 确 


您 也 可 以 册 除 本 地 存储 的 所 有 脱 机 内 容 。 
MIRAA BAAS QU! 


不 。 


中 包 合 有 已 访问 页 的 链接 ,可 使 用 户 快 
ESE ? 是 否 删 除 Internet 临时 文件 夹 中 的 所 有 内 容 ? 


图 9-49 ”删除 文件 设置 
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9.5.2 网 站 


服务 器 安全 配置 


1 


民 多 I», 


器 ， 来 保护 


q eru 
盘 一 定 要 


来 设立 不 同 的 访问 权限 ， 大 大 增 力 
9-50)， 也 就 是 不 安装 牺 


pa 


k C 
越 大 。 


操作 系统 安 


Windows 钥 件 向 导 E 


己 的 网 站 程序 不 被 攻击 
器 的 安全 配置 问题 。 如 何 安装 Windows 2003 Server 在 这 昌 
格式 化 成 NTFS 格式 ， 因 
1 了 系统 的 安全 性 。 
开启 的 服务 越 多 ， 被 黑客 入 侵 的 可 


占 商 家 采取 的 是 购买 服务 器 自己 托管 的 方式 ， 那 么 如 何 打造 一 
一 下 Windows 2003 Server 网 站 服务 
要 强调 的 就 是 便 
| 功能 ， 可 以 对 不 同 的 文件 
安装 Windows 组 件 的 时 候 要 把 所 有 的 


Ue? AXE 


为 NTFS 比 FAT £ T Arh 


将 不 讲述 ， 这 里 


个 安全 的 服务 


E 何 组 件 


因为 


$ 


Tindows ÍHft 
可 以 添加 或 删除 Windows 2000 的 组 件 。 


要 添加 或 删除 某 个 组 件 ， 


请 单 击 党 边 的 香 选 框 


一 部 分 。 雪 得 看 组 件 内 容 ,请 单 击 “ 详 细 信 


组 件 0): 


IN 


描述 ; 


所 需 磁 盘 空间 : 
可 用 磁盘 空间 : 


口 组 Internet 信息 服务 (IIS) 
站 JWindows 
HALA 

3 管理 和 上 监视 工具 


Media 服务 


包含 Windows 附件 和 工具 。 


1.1 MB 
272.0 MB 


x| 


;次 色 框 表示 只 会 安装 该 组 件 的 


详细 信息 QD... | 


《上 一 步 @) 


取消 


装 完成 以 后 ， 


一 个 复杂 的 口令 。 


1. 关闭 


要 做 
患 就 是 由 一 


一 个 安 4 


不 必要 服务 


a 


9-50 去 掉 组 件 


开始 对 Windows 2003 进行 设置 ， 别 态 了 给 Administrator 设置 


A 


些 不 必要 


一 些 不 必要 的 服务 通通 关闭 。 


1 ) 


的 站 点 ， 就 要 尺 


E: 


少 开 或 不 开 不 必要 的 


区 的 服务 引起 的 。 所 以 为 了 减少 黑客 利 


服务 器 一 般 都 开通 远程 管理 


在 操作 系统 


理 
Es 


,大 


[sj 


EE 


一 “远程 


不 出 


接 ” 命 f ^, 


pz" pu, B 
2) 输入 


单 里 的 “程序 ”一 “管理 工 
如 图 9- 


3) 现在 


0 可 打开 “远程 保 面 ”对 话 框 ， 如 图 


j 户 名 和 密码 ， 单 


击 “ 确 定 ”按钮 ， 


» 


52 所 示 。 
， 服 务 器 上 


Schedule 


FTP pub 
Telnet 
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lishing service 


里 选择 “计算 机 管 


JERA 


打开 “远程 桌面 ”对 话 框 ， 输 入 服务 器 的 IP 地 址 ， 单 
9 一 
连接 到 远程 服务 器 的 桌面 。 


51 所 示 。 


， 在 “服务 和 应 用 程序 ” 悍 


能 性 就 


Uu 


服务 。 现 在 的 一 些 站 点 的 安全 隐 
同 的 机 会 ， 


我 们 把 


中 选择 “开始 ”一 “程序 ”一 “附件 ” 


击 “ 连 


在 “开始 ” 3k 


选择 “ 服 


理 ” 


运行 的 所 有 服务 都 列 出 来 了 。 把 下 面 一 些 非 常 危险 的 服务 全 部 关 掉 ; 
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Terminal Services 

RunAs Services 

Telphony 

Remote Access Server 

Remote Procedure Call (RPC) locater 
Spooler 

TCP/IP Netbios Helper 

Telphone Service 


$1118.192. 7. 111. - HRAM 


计算 机 C) : 
用 户 名 : ^ MAPT-S0ESOSBCES Administrator 
当 您 连接 时 将 向 您 询问 凭据 。 


图 9-51 


«| 


计算 机 管理 (本 地 ) z 
[" 系统 工具 a Application Manage... 提供 ,.… 手动 LocalSystem 
5g] 事件 查看 器 a ASP.NET State Serv... HH A... 手动 AASPNET 
Og 系 统 信息 Sy Automatic Updates Mw.. B63% B3 LocalSystem 
A 性 能 日 志和 警报 irri Intelig... AR... 手动 LocalSystem 
48] HRR ClipBook x... 手动 LocalSystem 
3 设备 管理 器 Sy COM+ Event System ”提供 ,,， 已 启动 ”手动 LocalSystem 
S EU 和 组 Sy Computer Browser HIP... 手动 LocalSystem 
= 已 启动 ”自动 LocalSystem 
C] 磁盘 管理 SB. DHCP Client Bx... 手动 Local5ystem 
g 磁盘 碎片 整理 程序 Sis Distributed File Syst.. B®... 自动 Local5ystem 
Ə 逻辑 驱动 器 Sy Distributed Link Tra.. 当 交 ,,， 已 启动 ”自动 LocalSystem 
H a Aia Si Distributed Link Tra... 保存 手动 Local5ystem 
2 g 电话 服务 Sy Distributed Transac... 并 列 ,,， 已 启动 ”自动 Local5ystem 
E! WMI 控件 dn pm En LocalSystem 
ra i... & & LocalSystem 
加 E um FR... 手动 Local5ystem 
Bj Internet 信息 服务 y File Replication 在 多 ,.， 手动 Local5ystem 
SB. TIS Admin Service 允许 ,,， 已 启动 ”自动 Local5ystem 
y Indexing Service 手动 LocalSystem 
Sa Infrared Monitor 已 启动 ”自动 LocaSystem Z| 
IE 


图 9-52 ”打开 “计算 机 管理 ”面板 
关闭 的 方法 是 : 在 要 关闭 的 服务 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “属性 ” 命 


^. 打开 图 9-53 所 示 的 对 话 框 ， 单 击 “ 停 止 ” 停 止 这 个 服务 ， 然 后 把 它 的 启动 类 型 设置 为 
“已 禁用 ”。 这 样 ， 一 个 服务 就 被 禁止 了 。 
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RunAs Service 的 尾 性 (本 地 计算 机 )》 


常规 “| 登录 “| 故障 恢复 | 依存 关系 | 


显示 名 称 @@) : [m Service 
[E RISE T BRI BEDNIEE 


服务 名 称 : seclogon 
描述 QD: 
可 执行 文件 的 路 径 QD: 


Al xl 


t: WINNIVsysten32 services. exe 


启动 类 型 到) : 


2. 系统 用 户 管理 


[xxm 


禁用 了 
Bg 


在 这 里 停止 这 个 
服务 


图 9-53 关闭 服务 器 属性 设置 


在 Windows 2003 操作 系统 中 ， 所 有 帐号 的 管理 都 在 “计算 机 管理 ”一 “本 地 用 户 和 


组 ”里 实现 。 可 以 在 这 个 MMC 控制 台 里 修改 和 设置 


[er rr 


| sto mwv || e mim X 5 


ly uestes 
c3 E 
EPOD 
由 B IRAE 


Administrator 


aspnet wp account A 


,， Internet 来 宾 帐 号 
. 启动 H5 进程 帐号 


juanjuan 


G TsInternetUser TsInternetUser 
在 这 
所 属 的 


发 号 、 密 但 等 ， 如 图 9-54 所 示 。 


=| 口 | >| 


帐号 策略 : 


1) 拥有 Administrator 权限 的 月 


的 原因 是 防止 管理 员 一 有 旦 忘记 其 中 一 个 帐号 的 
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有 户 应 该 尽 可 


图 9-54 MMC 控制 台 


能 少 ， 最 好 只 有 两 个 。 
令 还 可 以 用 另 一 个 备 月 


设 两 个 Administrator 


帐号， 另外， 如 果 被 
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iiz 


KABUR 7 AI H ET 
2) 所 有 帐号 应 该 严格 管理 


3) 将 Administrator 改名 ， 改 为 一 


VLA 


4) 将 Guest 帐号 禁 
黑客 就 是 利用 Guest 的 弱点 ， 利 
密码 策略 : 


令 还 有 机 会 在 短 时 间 内 重新 获得 管理 权 。 


个 不 易 猜测 的 名 字 。 


]， 并 且 重 命名 为 一 个 复杂 的 名 字 ， 然 后 将 
| 工具 提 升 权限 将 一 个 帐户 提升 到 管理 员 组 的 )。 


建立 严格 的 分 级 审查 制度 ， 不 要 轻易 给 人 特殊 权限 。 


从 Guest 组 删 掉 CA 


D 给 所 有 用 户 设 上 复杂 的 口令 ， 


同时 包含 字母 、 数 字 和 


(如 asdf)、 熟 悉 的 数字 (如 20100 等 。 口令 是 黑客 攻击 的 重点 


理 员 所 做 的 任何 安全 设置 都 等 于 形 如 
一 下 : 键盘 上 能 用 做 口令 的 键 一 
个 。 如 果 


52x52x43-16348773000 (EH 163 亿 种 


可 能 性 还 要 小 。 这 已 经 可 以 


Et 有 10 〈 数 字 ) 433 (标点 
令 取 任意 5 个 字母 +1 位 数字 或 符号 〈 按 顺序 )， 可 能 | 
可 能 性 )。 但 实际 上 绝 大 多 数 人 都 只 
电脑 进行 穷 举 了 ， 在 Pentium200 上 每 秒 可 算 3.4 万 次 ， 像 这 


令 必须 与 帐号 名 不 同 ， 长 度 应 该 不 低 于 8 位 ， 应 访 
特殊 字符 。 不 要 使 用 大 家 熟悉 的 单词 (如 admin)、 熟 悉 的 键盘 顺序 


目标 ， 口 令 一 旦 被 突破 ， 管 


虚设 ， 而 这 往往 是 不 少 网 管 所 忽视 的 地 方 。 我 们 来 计算 


^ 


付 


号 ) +26x2 〈 大 小 写字 母 ) =95 


后 是 : 52x52x52x 
小 写字 母 ， 所 以 


8 位 


样 简单 的 口令 要 不 了 3 分 钟 。 如 果 用 PA 算 上 一 周 ， 可 进行 3000 亿 次 演算 。 所 以 应 用 
以 上 的 密码 。 
2) 打开 “管理 工具 ”一 “本 地 安全 策略 ”的 控制 台 ， 如 图 9-55 所 示 。 
EE EI =la x] 
| sto zv || + +| 0m BIA 


aj 


密码 长 度 最 小 值 
密码 最 长 存留 期 
ec 


3 C8 帐户 策略 
s C9 密码 策略 

e CB 帐 户 锁定 策略 
5-C9 本 地 策略 

由 -四 公 钥 策略 
DENT MEET 


[的 客 码 必须 符合 复杂 性 要 求 


9-55 ”本 地 安全 设 


3) 在 “帐户 策略 ”中 选中 “密码 策略 ”启用 “密码 必须 符合 复杂 性 要 求 ” 将 “密码 


长 度 最 小 值 ” 设 成 8,“ 密 码 最 长 存留 期 ” 设 成 4 
设 成 “0 个 ” 如 果 计 算 机 不 是 域 控制 器 就 不 用 开局 


密码 历史 ” 
原 的 加 密 来 储存 密码 ”。 


3. NTFS 安全 权限 


用 一 般 
限 ， 而 只 给 管理 员 和 System 完全 探 人 


如 果 网 站 中 的 数据 库 对 外 开放 ， 那 么 要 给 数据 库 设 置 对 一 般 
权限 。 如 果 发 现 菜 些 脚 本 (如 ASP) 不 能 执行 ， 或 者 某 些 需要 写 入 和 修改 的 操作 不 


NTFS 下 所 有 文件 在 默认 情况 下 对 所 有 人 Ceveryone) 为 完全 控制 权限 ， 这 使 


户 身 份 就 能 对 文件 进行 增加 、 删 除 、 执 行 等 操作 。 建 议 对 


由 的 权限 ， 如 图 9-56 所 示 。 


2 天 ,“ 密 码 最 短 存 留 期 ” 设 成 0 天,“ 强制 


“为 域 中 所 有 用 户 使 用 可 还 
一 般 用 户 只 给 予 读 取 权 


] 户 读 取 、 修 改 和 写 入 的 


H5 JG 
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成 ， 这 时 就 需要 对 这 些 文件 单独 设置 权限 。 管 理 员 在 设置 权限 的 时 候 一 定 要 小 心 谨慎 ， 
思 而 后 行 。 


了 到 
x | 
ur 
EHBSHo)[xBE,TYMERYM ”可 | 
TER E): jt — 拒绝 
列 出 文件 夹 / 读 取 数 据 Hn n 
读 职 属性 0 o0 
读 职 扩展 尾 性 n mnm 
ABEX S ANE R 口 o 
创建 文件 夹 /附加 数据 5 p 
BARI (s cr n 
写 入 扩展 属性 eve o 
删除 子 文件 夹 及 文件 、 读 取 ” 的 ”的 权限 」 g 
Bs UN n mn 
读 取 权限 " n 
更 改 权限 n n 
取得 所 有 权 口 0% 
将 这 些 权限 只 应 用 到 这 个 容器 中 的 对 象 。 ”全 部 清除 LL) 
EE (e 


we | mm | 


图 9-56 image 的 权限 项 目 设置 


4. 安全 审核 策略 
在 默认 的 情况 下 ，Windows 2003 是 不 记录 登录 事件 的 。 要 想 记 录 下 黑客 入 侵 事 件 就 需 
要 开启 安全 审核 策略 ， 按 照 图 9-57 所 示 的 设置 修改 好 设置 。 现 在 如 果 有 人 尝试 对 系统 进行 


某 些 入 侵 《〈 如 口令 猜测 、 改 变 帐 户 、 访 问 未 经 许可 的 文件 等 )， 都 会 被 记录 在 系统 的 安全 日 
志 里 。 


Ini xj 
| stwo 查看 W || e 小 | 外 | 加 | 加 | 多 


: Mr MPERA 


à 公 钼 策略 
田 - 甸 1P 安全 策略 ,在 本 + |f 
审核 帐户 管理 


图 9-57 安全 设置 信息 


这 样 所 有 的 事件 都 被 记录 在 案 ， 管 理 员 只 需要 通过 查看 系统 日 志 就 会 知道 在 哪个 时 间 
段 内 有 哪些 用 户 都 二 了 些 什么 ， 如 图 9-58 Pra. 


5. EFS 加 密 系统 


虽然 在 前 面 我 们 用 NTFS 给 系统 设 上 了 权限 ， 但 是 黑客 仍然 有 很 多 种 方法 可 以 穿越 这 些 
设置 。 穿 越 NTFS 的 方法 包括 口令 破解 、 用 户 在 离开 前 没有 退出 系统 或 系统 内 部 的 
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NTFSDOS 程序 被 黑客 越权 使 用 等 。 


ET =l0| x| 
| Btw zzv | 


计算 机 管理 (本 地 ) &j 2002-10-31 :50: Security 
2002-10-31 20:50:38 Security 

日 3 事件 查看 器 g ess 2002-10-31 ^ 20:50:38 Security 
2002-10-31 20:50:38 Security 
2002-10-31 20:50:38 Security 
2002-10-31 20:50:21 Security 
2002-10-31 20:50:21 Security 
2002-10-31 20:50:21 Security 
2002-10-31 20:50:21 Security 
2002-10-31 20:50:21 Security 
2002-10-31 20:50:13 Security 
人 2002-10-31 150: Security 
ç FAS INE 2002-10-31 :50: Security 

c3 还 辑 驱动 器 E 2002-10-31 :50: Security 

由 e 可 移动 存储 ğ 2002-10-31 :50: Security 

由 B 服务 和 应 用 程序 F 2002-10-31 20:50:10 Security 
ci 2002-10-31 20:48:36 Security 

2002-10-31 20:48:36 Security 

2002-10-31 20:48:36 Security 

2002-10-31 20:48:36 Security 


图 9-58 ”用户 操作 记录 


EFS 密码 组 结合 了 对 称 加 密 〈DESX) 和 非 对 称 加 密 RSA) 的 优点 对 数据 进行 加 密 。 
IF EFS 集成 进 文 件 系统 ， 因 此 一 个 恶意 用 户 不 能 绕 过 文件 系统 访问 到 硬盘 。 而 且 ， 所 有 
运行 在 内 核 模式 的 EFS 驱动 程序 都 不 能 由 用 户 直接 访问 。 

另外 ，EFS 可 以 很 好 的 和 NTFS 共存 ， 它 可 以 被 认为 是 除 NTFS 外 的 第 二 层 防 护 。 


6. TCP/IP (i$ 


Windws 2003 从 Windows NT 继承 了 TCP/IP 筛选 的 功能 。 打 开 “ 网 络 和 拨号 连接 ”， 在 
对 外 连接 的 网 卡 的 TCP/AP“ 属 性 ”一 “高 级 ”的 “选项 ”里 (图 9-59) 选择 “TCP/IP ji 
Xe". 因为 我 们 对 外 只 需 提供 HTTP 服务 ， 为 了 维护 的 需要 我 们 还 开 了 FTP 服务 ， 所 以 只 需 
要 允许 21、80 两 个 端口 。UDP 端口 经 常 成 为 被 黑客 D.O.S 攻击 的 目标 ， 所 以 我 们 在 这 里 禁 


止 所 有 的 UDP 端口 。IP 协议 我 们 开放 4 就 可 以 了 ， 如 图 9-60 所 示 。 
EXIJI S 了 xl 


T Jims 选项 | 


了 | 
Iv 启用 TCR/IP mit [所 有 适配器 ) E) 
C SO C SEU C 全 部 允许 (I) 
e 只 允许 外 — E 只 允许 他 ) 一 一 e PRET —4 
| TCP 端口 | VDP 端口 IP 协议 
21 4 
80 
B... 添加 . . . 
RIS GO | RES (0) | 


确定 | me | 


图 9-59 TCP/IP 设置 面板 图 9-60 ”筛选 选项 


Netbios 协议 非常 危险 ， 可 能 会 泄露 服务 器 的 信息 ， 所 以 必须 关闭 。 在 WINS 选项 里 选 
中 “禁用 TCP/IP 上 的 Netbios", 如 图 9-61 所 示 。 
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现在 ， 就 算 服务 器 不 幸 被 黑客 种 上 木马 也 没关系 ， 因 为 除了 80 和 21 端口 以 外 所 有 的 
端口 都 已 被 禁止。 


7. 修改 注册 表 
(1) 设置 生存 时 间 
黑客 可 能 通过 ping 命令 来 得 知 操作 系统 是 什么 类 型 的 ， 比 如 ping 一 台 Windows 2003 
server 服务 器 的 返回 值 中 的 TTL 是 128， 如 图 9-62 所 示 。 
axi 


rp 设置 | DNS Yms [uem 
WINS 地 址 ( 控 使 用 顺序 排列 ) W): 


MN 


3r 


ES 
E 


3t p... | 编辑 (E) | JOBS | 


如 果 启 用 UNHDSTS 搜索 ， 它 将 应 用 于 所 有 和 启用 TCP/IP 的 连接 。 


:N\>ping localhost 


[127.0.0.11 with 32 bytes of data: 
厂 启用 umosts gig Q) ZA. LNHUSTS QD 


127.0.0.1: bytes-32 timeXiB8ms TTL-128 
127.0.0.1: bytes-32 timeXi8ms TI1L-7128 


C ER TCP/IP 上 的 NetBIOS QD 


127.0.0.1: bytes-32 time<i@ms TTL-128 
127.0.0.1: bytes-32 timeXiBUms TTL-128 


statistics for 127.0.0.1: 

Packets: Sent = 4, Received = 4, Lost = Ø (8z loss», 
Approximate round trip times in milli-seconds: 

Minimum = Øms, Maximum = Øms, flverage = Øms 


图 9-61 高 级 设置 图 9-62 ping 命令 操作 


如 果 不 想 让 对 方 得 知 服务 器 上 装 的 是 何 种 操作 系统 ， 只 需要 修改 注册 表 中 的 键 值 ， 即 
在 HKEY LOCAL MACHEINENSYSTEM Current. ControlSet\Services\Tepip\Parameters 中 增 
加 名 为 DefaultTTL 的 键 ， 并 将 键 值 修改 成 任意 一 个 数字 ， 比 如 123， 如 图 9-63 所 示 。 


PES ES d E -ini x| 
注册 表 (R) 编辑 (E) EE) ERO 帮助 (H) 
C symc&xx 类 型 数据 
C SymEvent i REG SZ GARE 
E- sysaudio REG_DWORD 0x000000 
a A REG EXPAND SZ *iSvsteml 
E a 
EG Tepip ix 
LL] Enum 
— Linkage 
LL] Adapters $ E 


(CJ DNSRegisteredAdapter: C 十 六 进 制 D 

-Od Interfaces C 十 进 制 QU 
C PersistentRoutes 
E winsock 

C Performance 

E Security Priori 而 5 

(L]] ServiceProvider i REG 5Z 

(CJ TDASYNC Ei i i REG_DWORD 0x000000 


C3 TDIPx T REG DWORD 0x000012 
(CJ TDNETB 


je cn 


图 9-63 设置 生存 时 间 
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(2) 防止 ICMP Jil 


Ht 


ICMP 包 有 可 能 被 黑客 利 月 


日 来 进行 拒绝 服务 攻击 ， 所 以 我 们 要 关闭 Windows 2003 中 
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ICMP 重 定向 报 文 的 功能 ， 即 修改 HKEY LOCAL MACHEINE\SYSTEM\Current ControlSet! 


Services Tcpip Parameters 中 的 EnableICMPRedirects 键 值 


(C DNsRegisteredA 
B- Interfaces 
C {1E686010-( 
(Cd {62ECBD8A- 
C 4(7FCA0398- 
Œ {4022849C-: 
(C3 4D863DE894 
C3 PersistentRoute: 
C winsock 
C Performance 
£ Security 
(C ServiceProvider 
E TDASYNC 
(zy TDIPX 
C TDNETB 


T ------ 


tun] 


E 


为 0〈 默 认为 1)， 如 图 9-64 所 示 。 


类 型 数据 


ab) 

RS] AllonUnqualifiedQuery 

[ab] DataBasePath 
RE]DeadGwWDetectDefault 
RE]DefauktTTL 

ab] Domain 
R]DontAddDefaultGatewayDefault 
EnableICMPRedirect 
RE]EnableSecurityFilters 
RE]ForwardBroadcasts 
[ab] Hostname 
&e]IPEnableRouter 

(ab) NameServer 

[as]vy Hostname 
BPrioritizeRecordData 
[ab] SearchList 
(REUseDomainNameDevolution 


REG SZ (数值 未 设置 ) 

REG DWORD 0x00000000 (0) 
REG EXPAND. SZ SystemRoot ls 
REG DWORD 0x00000001 (1) 
REG DWORD 0x00000123 (291) 
REG SZ 

REG DWORD OxO0000000 (0) 
REG DWORD 
REG DWORD 0x00000000 (0) 
REG DWORD 0x00000000 (0) 
REG SZ caurenserver 

REG DWORD Ox00000000 (0) 
REG SZ 

REG SZ caurenserver 

REG DWORD 0x00000001 (1) 
REG SZ 

REG DWORD 0x00000001 (1) 


EBORE REAHKEY LOCAL. MACHINEYSYSTEMYCurrentControlSetlServiceslTcpiplParameters 


(3) 禁止 响应 ICMP 路 由 通告 报 文 
“ICMP 路 由 公告 ” 功能 日 26/7. 


He H. 


被 用 于 流量 攻击 等 严重 的 后 果 。 


常 。 因 此 ， 建 议 关 闭 响 应 ICMP 路 由 通告 报 文 。Win2003 中 默认 值 


9-65 所 示 。 


DES ELLA 
注册 表 (R) 编辑 (E) SEED 
C Tcpip 

c3 Enum 

C Linkage 

C Parameters 

C Adapters 

(C DNSRegisteredAc 

C Interfaces 
(C (1E68B010-C 
(C3 {62ECBD8A-: 
(C3 47FCA039B-c 
(Cg 1a022849C-z 


+) 


E T 
G PersistentRoutes 
£ Winsock 
C Performance 
(CJ Security 


a ServiceProvider 
C TDASYNC 


H6 zx 1H 


此 问题 曾 导致 校园 


收藏 (E) WEB) 


造成 他 人 计算 机 网 络 连接 异 


图 9-64 防止 ICMP 攻击 


、 数 据 被 写 听 以 及 计算 机 
LIS ROC TCR 让、 长 时 间 的 网 络 异 
为 2， 应 该 改 为 0， 如 


ET 


PerformRouterDiscovery 


图 


REG SZ 
REG DWORD 


0x00000000 0 (0 


VR] 


9-65 


禁止 响应 ICMP 路 


通告 报 文 
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(4) 防止 SYN 洪水 攻击 
SYN 洪水 攻击 是 黑客 攻击 的 终 


是 可 以 预防 的 ， 如 图 9-66 所 示 。 


eters 下 的 AutoShareServer 键 值 为 0， 如 图 


a ERRES 


C] Tcpip 
(C Enum 
E jnkage 
Ce Parameters 72 
{I Adapters 
C DNSRegisteredAc 
CJ Interfaces 
国 PersistentRoutes 
(C winsock 
C Performance 
(CJ Security 
(C ServiceProvider 
(Cj TDASYNC 
C3 TDIPx 
C TDNETB 
CI TDPIPE 
(zy TD5PX 
E TDTCP 
C TermbpD 
(Lj TermService 


受 计 与 制作 


用 极 武器 DOS Xd 


注册 表 (R) RRO SEV UHR) RH 


二 中 常见 的 一 种 ， 但 是 通 


过 修改 注 


名 称 类 型 数据 

(abe) REG Sz ( 激 值 未 设置 ) 

BAlowUnaualifiedQuery REG_DWORD 0x00000000 (0) 

[ab]DataBasepath REG EXPAND SZ *icSystemRoot*/oAS 

[E8] DeadGwDetectDefault REG DWORD 0x00000001 (1) 

RE ]DefaultTTL REG DWORD 0x00000123 (291) 

[ab] Domain REG SZ 

&$DontAddDefaultGatewayDefault REG DWORD 0x00000000 (0) 

RE]EnableICMPRedirect REG DWORD 0x00000000 (0) 

fRE]EnableSecurityFilters REG DWORD 0x00000000 (0) 

RE]ForwardBroadcasts REG DWORD 0x00000000 (0) 

(ab]Hostname REG SZ caurenserver 

R8] IPEnableRouter REG DWORD 0x00000000 (0) 
NameServer REG Sz 

ably Hostname REG SZ caurenserver 

Rg] PrioritizeRecordData REG_DWORD 0x00000001 (1) 

(ab|SearchList REG SZ 

EH SynattackProtect REG DWORD 

(RE]UseDomainNameDevolution REG DWORD 0x00000001 (1) 


x 


(5) 禁止 C$、 


BEAD HERRHKEY LOCAL MACHINEISYSTEM|CurrentControlSetiServiceslTcpiplParameters 


图 9-66 Brik SYN% 


DY$ 等 缺 省 共享 


共 水 攻击 


rZ 


表 也 


修改 HKEY LOCAL MACHEINE\SYSTEM\CurrentControlSet\Services\lanmanserverparam- 


9-67 所 示 。 


DRESS ELLE 


注册 表 (R) 编辑 (E) EE 收藏 (E) TERN) 


C KNetWch 


名 称 


类 型 


-- Igi x| 


数据 


C KsecDD 
C KWATCH 
C3 lanmanserver 


C3 rt 
C lbrtfdc 

Œ LicenseInfo 
国 LicenseService 
C LmHosts 

C Ipénds35 

E mom 

国 Messenger 
C mnmdd 

C mnmsrvc 

C Modem 

(] Mouclass 

C mouhid 

e MountMgr 


F 


到 


t 
3j 
c 
: 
F 
F 
t 
* 
F 
3j 
F 


Aew 


pon 
R]enableforcedlogoff 
(RE]enablesecuritysignature 
&Ájrequiresecuritysignature 


REG SZ 
REG DWORD 
REG DWORD 
REG DWORD 
REG DWORD 
REG DWORD 
REG DWORD 
REG DWORD 


(数值 未 设置 ) 
0x0000000f (15) 


0x00000000 (075 


Dx0UUUU000 (0) 
Ox00000000 (0) 
Ox00000001 (1) 
Ox00000000 (0) 
0Dx00000000 (0) 


(6) 禁止 admin$ 默 认 共 享 


admin$ 默 认 共 享 是 指向 %Systemo%b/systerm32 


9-67 


禁止 C$、DY$ 等 缺 省 共享 


目录 的 默认 共享 ， 


常常 被 黑客 利用 来 利 


DS 


马 以 取得 系统 的 控制 权 ， 可 以 通过 修改 AutoShareWks 值 为 0 来 禁止 它 ， 如 图 9-68 所 示 。 
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zinix 
注册 表 (R) 编辑 (E) SAM 收藏 (E) SERA) 


+- KNetWch 名 称 类 型 

* C1 KsecDD ERR) REG SZ (数值 未 设置 ) 

t c KWARTLER REG DWORD Dx0000000F (15) 

5 nmanserver REG DWORD OxO0000000 (0) 

rU ces REG DWORD 

$ ierra S Cachedopentimit REG DWORD 000000000 (0) 
C brtfdc RE]enableforcedlogoff REG DWORD 0x00000001 (1) 

+- LicenseInfo &RS]enablesecuritysignature REG DWORD 0x00000000 (0) 

HH- LicenseService i" R]requiresecuritysignature REG DWORD 0x00000000 (0) 

由 -全 LmHosts 

&-(] lpénds35 

H-E MDM 

+- Messenger 

+- mnmdd 

由 . 国 mnmsrvc 

C] Modem 

+- Mouclass 

+- mouhid 

二 | 


ea MountMar = 
| | >Í 


EROHEREAHKEY _LOCAL_MACHINEISYSTEM\CurrentControlSet\Serviceslanmanserver\parameters 


Za] 


9-68 禁止 admin$ 缺 省 共享 


CI) 禁止 IPC$ 共 享 
IPC$ 连 接 共享 是 一 个 非常 危险 的 默认 共享 ， 黑 客 常常 通过 扫描 IPC$ 共 享 来 猜测 密码 。 
修改 HKEY LOCAL MACHEINE\SYSTEM\Current ControlSet\ControlSet\Lsa 中 的 restrictan- 


onymous 的 值 为 2 来 禁止 这 个 共享 ， 如 图 9-69 所 示 。 


UNA E ress” 的 字符 串 ， 把 值 修 改 为 任何 想 要 的 MAC 地 址 的 值 ， 图 9-70 所 示 的 是 


Te 

注册 表 (R) 编辑 (E) EE) dump) SERO 

(C FontAssoc 名 称 类 型 

GraphicsDrivers [ab] (Ski) REG, SZ (数值 未 设置 ) 

国 GroupOrderlist RJ auditbaseobjects REG DWORD 0x00000000 (0) 

- HAL [ab] Authentication Packages REG_MULTI_SZ msvi ü 

~ n Rg] Bounds REG_BINARY 00 30 00 00 00 201 
项 cashonauditfail REG_DWORD 0x00000000 (0) 

C Keyboard Layout Ki a 

Keyboard Layouts Fullprivilegeauditing REG BINARY 00 

£d [Rg] Imcompatibilitylevel REG_DWORD 0x00000000 (0) 

ÖA MediaCategories i REG_DWORD 0x00000108 (264) 

(Si MediaInterfaces He ilicati REG MULTI SZ FPNWCLNT RASSFI 

C] MediaProperties REG, DWORD 0x00000002 (2] 

(C MediaResources Hn REG DWORD OxOODQQUO1 (1) 

C] MediaSets REG MULTI 5z kerberos msvi 0s 

C Network 

C NetworkProvider 


Ec] -E3- Ec] E] EIE] E] E] EE] E] EH 
ANNAA É 


EK FÉRENHKEY LOCAL MACHINEISYSTEMYCurrentControlSetlControllLsa 


图 9-69 21k IPC$H3 


(85 修改 MAC 地 址 
在 HKEY LOCAL MACHEINE\SYSTEM\Current ControlSetControlClass. 中 查找 “网 
， 打 开 这 个 目录 ， 9-70 所 示 的 是 {4D36E972-E325-11CE-BFC8-08002BE10318}， 展 


。 然 后 在 这 


个 分 文中 找到 键 值 为 网 卡 名 的 “DriverDesc” 键 ， 然 后 新 增 一 个 名 字 为 
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111111111111， 然 后 重启 计算 机 ， 运 行 ipconfig/all 命令 ， 就 会 发 现 MAC 地 址 已 经 改变 了 。 
电子 商务 网 站 开办 后 的 一 些 后 续 维 护 工作 就 介绍 到 这 里 ， 希 望 对 读者 有 所 帮助 。 


IS|x| 
注册 表 (R) 编辑 (E) 查看 (WW 收藏 (E) 帮助 (H) 
(L1 {4036E96E-E a | | ZER 类 型 数据 
{4036E96F-E  |[ab] DriverDate 7-20-2001 
C {4D36E970-E varhata aA PET 


Sics "| [i 
Intel(R) PRO/100 VE Desktop Adapter 


(ab]EnableDynamicRe. 4 REG SZ 

(ab]EnablePME REG SZ 

(ab]EnablePowerDow. ^. REG SZ 

(ab]HPQDisable REG SZ 

lab]Infpath REG SZ oem3.inf 
(ab|InfSection REG SZ D110KMP.ndi 
(ab]InfSectionExt REG SZ ,NTx86 
[ab]LinkBasedLogin REG SZ 0 

[ab] LogErrorMessages — REG SZ 1 

[ab] MatchingDeviceld REG Sz pcilven 8086&dev 2449&subsys 3010808€ 
[ab]MwIEnable REG SZ 1 


图 9-70 (rt MAC 地址 
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98103: 电子 商务 网 站 的 运营 与 推广 


电子 商务 网 站 成 功 运营 的 关键 在 于 有 一 套 合理 的 网 络 营销 推广 方案 ， 网 络 营 销 作为 一 
个 新 生 事物 ， 在 市 场 营销 中 发 挥 了 传统 营销 很 多 不 具备 的 作用 ， 并 且 越 来 越 受 到 人 们 的 关 
注 。 聪 明 的 网 络 营销 者 明白 ， 必 须 将 整个 营销 过 程 当 作 是 一 个 战略 来 进行 ， 整 合 所 有 的 营销 
策略 ， 把 营销 视 为 一 个 连续 的 圈 ， 从 一 个 能 够 产生 收入 的 想法 开始 直到 公司 拥有 了 忠实 顾客 
的 不 断 光 顾 。 本 章 将 重点 介绍 Jadewen 电子 商务 网 站 的 整个 整合 营销 思路 。 


本 章 重 点 介绍 如 下 知识 : 


© 电子 商务 网 站 的 运营 策略 
Cy 电子 商务 网 站 营销 方案 
它 ) 搜索 引擎 营销 

O 博客 微 博 营销 

(^7 其 他 营销 推广 


10.1 | 电子 商务 网 站 的 运营 策略 


即使 是 实体 的 商店 ， 有 再 好 的 商品 ， 如 果 不 善于 运营 推广 ， 同 样 无 法 售 出 。 本 小 节 主 
要 介绍 网 站 的 运营 策略 ， 它 包括 网 站 商家 自身 的 定位 、 网 站 的 经 营 管理 、 广 告 策划 以 及 商品 
的 定价 策略 等 。 


1011 运营 管理 者 的 定位 


开办 成 功 的 网 站 并 获 利 ， 在 总 体 上 需要 做 到 如 下 几 点 ; 
(OD 具有 一 定 的 投资 能 力 
开办 电子 商务 网 站 虽然 比 开办 实体 企业 要 少 投入 很 多 硬件 上 的 成 本 ， 但 正 所 谓 “ 一 份 
投入 ， 一 份 收入 ” 如果 想 拥有 较 好 的 销售 业绩 ， 还 是 需要 投入 适量 的 广告 费用 的 ， 这 就 要 
求 网 站 管理 者 一 定 要 有 一 定 的 投资 能 力 。 以 我 们 给 多 家 商家 开办 电子 商务 网 站 的 经 验 来 看 ， 
根据 经 营 产品 的 不 同 投入 准备 在 50 万 一 500 万 之 间 较 为 合适 ， 是 投资 就 有 风险 ， 所 有 的 投 
资 网 站 的 经 营 者 一 定 要 充分 地 做 好 投资 的 准备 。 

(2) 掌握 电子 商务 从 业 知 识 

网 站 属于 电子 商务 范畴 ,“ 知 已 知 彼 ， 百 战 不 殉 ”， 既然 从 事 这 个 行业 ， 那 么 所 有 的 
管理 者 一 定 要 及 时 充电 ， 了 解 电子 商务 的 行业 特点 和 知识 ， 关 注 这 个 行业 的 最 新 动向 ， 
这 样 才 能 让 自己 的 网 站 不 论 是 在 经 营 方 向 上 ， 还 是 在 技术 层面 上 ， 都 不 会 落后 于 别人 家 
的 网 站 。 


c 


P 


在 电子 商务 
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(3) 正确 的 市 场 判断 和 外 
市 场 判断 能 力 是 所 有 要 求 的 基 而 


E7J 


主要 包括 商品 的 市 场 定位 、 商 品 


是 否 畅销 、 商 品 积 压 量 的 大 小 等 。 正 确 


上 1， 作为 一 个 管理 者 ， 市 场 判 断 能 力 是 不 可 缺少 的 ， 它 


创业 者 可 以 选择 出 适销 对 路 的 商品 ， 从 而 取得 良好 的 销售 业绩 。 

(4) 良好 的 价格 分 析 能 

进行 了 正确 的 市 场 判 断 之 后 ， 就 需要 对 商品 进行 一 定 的 价格 分 析 。 我 们 在 实际 经 营 
中 ， 既 要 进 到 价格 最 低 的 商品 ， 又 要 保证 商品 的 品质 与 质量 ， 通 俗 的 讲 ， 就 是 要 将 商品 标 出 
一 个 适宜 的 出 售 价格 。 


(5) 积极 的 宣传 推广 能 


当 商 品 一 切 设置 妥当 后 ， 不 要 认为 就 完事 大 吉 了 ， 还 需要 对 商品 进行 积极 地 
广 包 括 网 络 中 的 
让 更 多 的 浏览 者 进入 自己 的 网 站 ， 进 一 步 了 解 自己 的 商品 ， 从 而 达到 销售 的 


宣传 


x 


的 市 场 判断 能 力 ， 使 


宣传 推广 和 现实 


(6) 敏锐 的 市 场 观察 力 


如 果 认 为 自己 站 
是 不 可 取 的 。 我 们 需 
样 才 会 让 自己 的 销售 前 
(7) 热情 


这 一 切 


的 商品 和 


更 加 可 观 。 


品 的 时 候 ， 和 希望 看 到 的 是 热情 洋溢 的 笑脸 和 适当 
把 握 住 这 些 机 会 ， 通 过 良好 的 


的 问候 等 ， 要 


省 路 很 好 ， 就 坐等 顾客 上门， 对 其 
要 随时 把 握 市 场 的 变化 趋势 ， 据 此 调整 自己 的 经 营 商品 与 经 营 方式 ， 这 


= 
A 


的 服务 意识 
的 后 盾 是 我 们 必须 要 有 


生活 


的 宣传 


EJ Aj 
可 》 


— 
我 们 要 通过 各 种 方式 和 渠 


他 一 


目的 。 


切 都 不 闻 不 问 ， 这 种 做 法 


好 的 服务 意识 以 及 热情 的 服务 态度 。 当 客户 来 选 购 商 


10.1.2 推广 的 广告 策略 


网 站 运作 起 来 之 后 ， 下 
品 。 网 站 的 成 功 很 大 一 部 分 取决 于 客户 的 沪 
更 多 的 成 交 的 机 会 ， 进 而 加 大 商品 的 销售 


的 介 引 


， 或 者 说 是 礼貌 的 文字， 以 及 放假 日 


4E 


号 


E 
FR 


COD 利用 知名 网 站 的 收费 推广 


在 易趣 网 、 淘 宝 网 等 大 型 交易 


品 橱窗 位 的 推荐 、 首 页 推荐 位 展示 以 及 诚信 
这 样 会 给 你 的 网 站 带 
允许 的 话 ， 我 们 推荐 使 用 。 


是 利 大 于 次 ， 


说 阴 : 


来 更 多 的 


HSEZA SE, 
浏 


步 就 是 要 通过 广告 宣传 ， 吸 引 浏 
We [p 
Mh AS 


后 服务 建立 起 忠实 的 客户 群体 。 


览 者 进入 网 站 浏览 你 的 商 


有 越 来 越 多 的 客户 观看 你 的 网 站 ， 才 会 有 


。 在 此 ， 癌 网 站 的 管 


理 者 推荐 如 下 的 广告 策略 : 


网 站 中 ， 网 站 本 身 提供 了 一 些 / 
这 些 服务 通常 是 收取 一 定 的 费用 的 ， 但 


= or Ai 


A 
r1 


宣传 的 方式 ， 例 如 商 


VA: -E 


使 更 多 的 客 / 


AB, 


”关注 你 的 商品 。 如 果 条 件 


其 实 ， 不 需要 将 自己 网 站 里 的 每 一 个 商品 ， 都 采用 收费 推广 的 方式 ， 只 需要 选 出 一 两 
件 有 代表 性 的 商品 进行 推广 ， 将 买 家 吸引 到 自己 的 网 站 ， 当 客户 进入 你 的 网 站 之 后 ， 自 然 也 


就 会 浏览 


(2) 利用 知名 网 站 的 边缘 推广 


上 面 我 们 介绍 了 利 


我 们 还 可 以 通过 这 些 大 型 网 站 来 进行 一 些 边缘 上 


些 页 


动 ， 为 网 站 多 做 一 
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用 知名 网 站 的 收费 


广 ， 可 能 有 一 些 管理 


其 他 的 商品 。 这 样 做 既 可 以 节省 一 定 的 成 本 ， 又 达到 了 商品 推广 的 目的 。 


者 会 觉得 浪费 钱 ， 那 么 ， 


] 


广 。 比 如 多 参加 一 些 知 名 网 站 内 的 
献 ， 适 当地 应 用 论坛 来 宣传 自己 的 网 站 。 


公共 活 


说 


一 般 不 要 采用 直接 发 广告 的 形式 ， 
签名 档 ， 将 自己 的 网 站 地 址 与 大 概 的 


RB: 
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+ -J- 
经 营 范 


注意 ， 进 入 你 的 网 站 ， 进 而 成 为 你 的 客户 。 


(3 


除 


) 利用 网 站 
了 应 用 知名 网 


链接 来 


进行 网 站 的 宣 


M^, 


E 


ULETI 


E 


的 友情 链接 
站 做 一 些 宣传 ， 我 们 也 不 要 放弃 
传 。 友 情 链接 包括 与 知名 网 址 的 链 


站 的 链接 等 。 如 果 条 件 多 许 ， 当 然 推荐 使 用 前 两 种 ， 毕 竞 这 样 在 很 


人 
FT 


,的 友情 链接 。 


然 通过 个 人 网 站 的 链接 ， 也 可 以 在 一 定 程 


(4) 专业 搜索 引擎 网 站 推广 


在 所 有 


用 于 人 
与 他 们 


WET 
H 


的 


们 的 
达成 一 致 的 协议 ， 争 


C5) 利用 个 人 的 网 络 宣传 


当然 ， 除 了 应 用 上 述 所 有 的 外 界 力 1 
传 自己 的 网 站 。 例 如 应 月 


广 方式 中 ， 专 业 搜 索引 擎 
日 常生 活 ， 我 们 要 在 各 种 提供 搜索 引擎 注册 服务 的 网 站 上 ， 注 册 网 站 的 资料 ， 
+ 取 获 得 更 多 的 浏览 者 进入 网 站 。 
度 、 谷 歌 、 搜 狗 、 雅 虎 等 ， 在 后 面 我 们 将 


Ley 


其 他 的 宣 


大 程度 上 力 


E 


度 上 增加 浏 


pu 


。 在 这 里 


-— 》 


E. 


4 


也 


| 


AS 


你 的 空间 、 博 客 、 


E EL 


邮箱 、BBS、 


UIS Id ns 


T 
HS, 


留言 


目前 ， 大 型 的 搜索 引擎 网 站 ， 
E Jrik. 


论坛 对 于 广告 帖 是 格 杀 勿 论 的 ， 但 是 我 们 可 以 采用 
围 包括 在 签名 档 里 ， 无 形 中 会 引起 许多 阅读 者 的 


传 机 会 ， 即 还 可 以 通过 友情 
捷 、 搜 索引 擎 的 链接 以 及 其 他 个 体 网 


IA: EG 
w, ER, 


I 大 了 浏 


建议 按照 不 同 的 情况 


占有 很 大 的 份量 。 越 来 越 多 的 搜索 引擎 应 


并 


传 自 己 的 网 站 之 外 ， 我 们 还 可 以 通过 自身 来 宣 
进行 一 定 的 网 站 宣 


传 。 


不 要 忽略 这 些 方式 ， 很 多 时 候 通 过 一 传 十 、 十 传 百 可 以 吸引 更 多 的 客户 ， 进 而 达到 增加 客户 
量 的 目的 。 

C60 利用 聊天 工具 的 宣传 

网 络 的 诞生 ， 就 是 使 越 来 越 多 的 陌生 人 通过 互联 网 相互 联系 ， 交 换 信 息 。 其 中 ， 主 要 
应 用 聊天 工具 实现 。 我 们 要 适当 地 应 用 这 些 聊天 工具 ， 通 过 网 络 沟通 ， 来 实现 自己 网 站 的 宣 
传 。 总 结 这 些 工具 如 下 : 

方法 一 : QQ 即时 通信 工具 。 

QQ 通信 工具 ， 是 国内 应 用 最 广泛 的 交流 工具 ， 我 们 可 以 在 QQ 状态 中 自行 设置 自己 
的 宣传 信息 ; 或 者 在 自己 的 个 人 介绍 中 宣传 ;或 者 在 自己 的 QQ 邮箱 中 群发 自己 的 宣传 信 


"E 
息 等 。 


方法 二 : MSN 


因 
宣传 网 


即时 通信 工具 。 


为 MSN 在 国际 


站 。 宣 传 方式 同 QQ 宣传 大 同 小 异 。 


方 


法 三 : 淘宝 旺旺 或 者 


阿 


EHEH 


概括 为 淘宝 四 


ERE. 


E xs 


如 


的 选择 ， 因 
站 信息 
方法 四 : i 


果 在 淘宝 网 站 上 开店 


为 它 毕竟 是 专门 


E 
， 我 们 


荐 使 用 。 


铺 


， 或 者 在 阿 昌 


巴巴 网 站 .| 


互联， 很 多 办 公 者 通常 都 选用 MSN， 同样 我 们 也 可 以 通过 MSN 来 


上 批发 商品 等 ， 淘 宝 耻 


E 旺 也 是 一 个 好 


用 于 商家 和 买 家 进行 交流 而 帮 


TS 


H 


传 方式 同 前 两 种 。 


百度 HI 等 。 
这 是 大 型 搜索 网 站 的 一 个 新 的 分 3 
1 的 网 站 。 


IT 


T 当然 ， 如 果 应 


Ff 发 的 ， 在 这 里 我 们 可 以 随时 发 布 网 


] 这 些 交 流 工具 ， 也 可 以 同时 宣传 
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方法 五 : 手机 短信 。 


有 了 各 种 网 络 通信 工具 ， 很 多 人 就 筷 了 手机 的 用 途 ， 


需要 提醒 的 是 ， 不 要 过 度 宣 传 ， 在 这 方面 移动 和 联通 还 是 有 


除了 上 述 方式 之 外 ， 我 们 在 平日 里 也 


你 的 产品 ， 争 取 回 头 客 ， 更 要 争取 让 你 


的 客户 为 你 介绍 新 的 客户 。 


切合 法 手段 ， 多 角度 、 全 方位 地 进行 网 站 宣传 。 


10.1.3 ”产品 的 定价 策略 


为 网 站 经 营 的 商品 ， 竺 


以 快速 地 促进 网 站 的 交易 。 有 具体 的 商品 定价 可 以 遵循 以 下 的 原则 ; 
1) 销售 价格 要 保证 基本 利润 点 ， 不 要 轻易 降价 ， 也 不 要 定价 太 高 ， 定 好 的 价格 不 要 轻 


易 去 改 。 


2) 包括 运费 后 的 价格 应 该 低 于 市 面 的 价格 。 
3) 网 下 买 不 到 的 时 尚 类 商品 的 价格 可 以 适当 高 一 些 ， 低 了 反而 影响 顾客 对 商品 的 印象 。 
4) 经 营 的 商品 可 以 拉 开 档次 ， 有 高 价位 的 ， 也 有 低 价位 的 ， 有 时 为 了 促销 需要 甚至 可 


以 将 一 两 款 商 品 按 成 本 


介 出 售 ， 主 要 是 吸引 眼球 ， 增 加 入 气 。 


其 实 手机 宣传 也 同样 重要 。 不 过 
定 的 限制 的 。 
要 广 交 朋 友 。 通 过 认识 许多 朋友 ， 介 绍 他 们 关注 


总 之 ， 我 们 要 充分 利用 一 


| 定 一 个 适当 的 网 上 销售 价位 是 十 分 必要 的 。 一 个 好 的 定价 ， 可 


5) 如 果 不 确 定 某 件 商品 的 网 上 定价 情况 ， 可 以 比较 其 他 的 购物 网 站 定价 ， 在 上 面 输入 


己 要 经 营 的 商品 名 称 ， 在 查询 结果 ， 
己 的 报价 。 


你 就 可 以 知道 


6) 如 果 自 己 愿 意 接受 的 价格 远 远 低 于 市 场 售 价 ， 


同类 商品 在 网 上 的 报价 ， 然 后 确定 出 自 


直接 


确定 市 场 定价 或 者 想 要 吸引 更 多 的 买 家 ， 可 以 采 


] 况 价 的 方式 。 


7) 定价 一 定 要 清楚 明 


， 定 价 是 不 是 包括 运费 一 定 要 交待 清楚 ， 


会 ， 进 而 影响 到 自己 的 声誉 ， 模 糊 的 定价 


10.2 | 电子 商务 网 站 营销 方案 


经 过 市 场 调 研 ， 使 项 目 有 了 好 的 市 场 定位 ， 也 有 了 自己 特 1 
进行 专业 的 营销 推广 工作 ， 本 小 节 将 带 大 家 解读 Jadewen | 
子 商 务 网 站 的 读者 有 所 帮助 。 


望 对 那些 做 电 
10.21 定位 推广 的 目标 


Jadewen 嫁 衣 网 站 是 针对 结婚 女性 的 
站 。 通 过 推出 Jadewen 嫁 衣 网 站 ， 能 够 让 Jadewen KH dih 
阵地 ， 以 提升 Jadewen 嫁 衣 品牌 网 
网 络 的 发 展 为 整合 传播 开辟 了 一 条 新 途径 。 网 络 资源 的 最 大 优势 在 于 快速 、 便 捷 、 低 
有 互动 性 。 如 今 上 网 的 人 越 来 越 多 ， 信 息 传播 面 广 


的 传播 


高 效 ， 且 


廉 、 


充分 利用 这 些 特 点 ， 为 爱美的 每 一 个 新 娘 服务 。 
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通过 有 效 的 网 络 营销 活动 ， 可 以 使 Jadewen 嫁 衣 网 站 实现 上 述 


色 的 人 熏 利 模式 ， 剩 下 的 就 


外 子 商 务 的 整合 营销 


镍 纱 行业 门户 网 站 
的 知名 度 、 美 誉 度 和 忠诚 度 。 


一 口 价 就 可 以 了 ; 如 果实 在 不 


否则 有 可 能 会 引起 误 


至 会 使 有 意向 的 客户 放弃 购买 。 


是 
EnS 
希 


E a. 


和 场 营销 推广 的 需要 ， 专 门 制 作 的 一 个 婚纱 销售 网 


这 一 行业 


， 传 播 速度 快 ， 我 们 可 以 


期 望 ， 能 够 较 传统 途径 和 


第 10 章 ， 电 子 商务 网 站 的 运营 与 推广 | 


方法 更 为 快捷 地 实现 深化 品牌 传播 目的 。 
网 站 推广 效果 衡量 标准 : 网 站 访问 量 与 会 员 注册 数 


稳步 上 升 ， 企 业 美 誉 度 与 客户 的 忠诚 度 明 显 提高 。 第 一 步 进 行 婚纱 产品 网 上 市 场 调研 | 


Mx D EEM: ERKL P. Ed 


从 这 里 开始 ! 这 条 广告 语 在 网 站 的 banner 中 已 经 体现 。 第 二 步 进行 网 上 消费 者 行为 分 析 | 
10.2.2 ”网 络 营销 的 内 容 
网 络 营销 的 内 容 第 三 步 进行 网 络 营销 策略 制定 | 


网 络 营销 作为 新 的 营销 方式 和 营销 手段 实现 企业 的 
营销 目标 ， 它 所 包含 的 内 容 非 常 广泛 。 一 方面 ， 网 络 营 第 四 步 制定 网 上 产品 和 服务 策略 | 
销 要 针对 新 兴 的 网 络 市 场 ， 及 时 了 解 和 把 握 网 络 市 场 的 
消费 者 特征 和 消费 者 行为 模式 的 变化 ， 为 企业 在 网 上 市 第 五 步 设 计 网 上 价格 营销 策略 | 
场 进行 营销 活动 提供 可 靠 的 数据 分 析 和 营销 依据 ; 另 一 
四 ， 网 络 营销 作为 在 Internet 上 进行 的 营销 活动 ， 它 与 第 六 步 网 上 渠道 选择 与 直销 | 
统 营销 的 基本 营销 目的 是 一 致 的 ， 传 统 营 销 中 的 产品 
品牌 、 价 格 、 渠 道 和 促销 等 要 素 都 会 在 网 络 营销 中 体现 第 七 步 网 上 促销 与 网 络 广告 | 
出 来 ， 但 与 传统 营销 相 比 ， 又 有 很 多 变化 。 

总 结 网 络 营销 中 一 些 主要 内 容 ， 确 定 Jadewen 电子 


商务 网 站 运营 的 工作 方案 流程 ， 如 图 10-1 所 示 。 第 八 步 实现 网 络 营销 管理 与 控制 | 


10.2.8 制定 网 络 营销 方法 图 10-1 制定 运营 的 工作 流程 


1 w 


H 


网 络 营销 职能 的 实现 需要 通过 一 种 或 多 种 网 络 营销 手段 ， 常 用 的 网 络 营销 方法 除了 搜 
索引 擎 注册 之 外 ， 还 有 关键 词 搜索 、 网 络 广告 、 交 换 链 
接 、 信 息 发 布 、 邮 件 列表 、 许 可 E-Mail 营销 、 个 性 化 营 搜索 引擎 (SEM) 
销 、 会 员 制 营销 、 病 毒性 营销 、 网 络 视频 营销 、 博 客 营 m pede 
s EA PES E ca Liz A 4 站 né 
销 、 论 坛 活动 营销 等 。 基 于 企业 网 站 的 网 络 营销 显得 更 六 网 络 广告 推广 
有 优势 ， 如 图 10-2 所 示 。 交换 链接 推广 

网 络 营 销 的 具体 方法 有 很 多 ， 其 操作 方式 、 功 能 和 效 。 时 CUM. 
果 也 有 所 区 别 ， 实 例 重 点 以 搜索 引擎 营销 和 博客 微 博 营 销 。 satin 
为 主 ， 其 他 的 营销 手段 为 辅 ， 来 介绍 网 络 营销 的 方法 。 。 A Ric 

1 搜索 引擎 营销 

搜索 营销 SEM 包括 SEO 和 PPC 两 部 分 ， 主 要 是 利 OA MAMMA 


用 搜索 引擎 的 关键 词 排名 带 来 的 流量 进行 宣传 推广 。 搜 索引 擎 优化 也 就 是 SEO， 即 英文 
Search Engine Optimization 的 首 字 母 缩写 。SEO 有 时 也 指 Search Engine Optimizer， 即 搜索 
引擎 优化 师 。PPC 是 Pay Per Click 的 英文 首 字 母 缩写 ， 可 意译 为 点 击 付费 竞价 广告 ， 典 型 
代表 是 Google Adwords 广告 以 及 百度 竞价 排名 。 之 所 以 将 搜索 引擎 放 在 第 一 位 ， 是 因为 正 
常情 况 下 ， 在 网 上 购物 的 顾客 ， 他 们 在 购买 某 产 品 时 ， 都 习惯 使 用 搜索 引擎 在 网 上 检索 所 需 
要 的 产品 。 目 前 ， 搜 索引 擎 在 国内 已 经 非常 普及 ， 那 么 浏览 者 主要 是 通过 什么 方式 在 网 上 导 
找 自己 所 要 找 的 东西 呢 ? 大 部 分 使 用 者 都 是 登录 有 名 的 搜索 引擎 ， 输 入 相关 的 搜索 内 容 ， 然 
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j 


后 按 下 回 车 键 找到 相关 的 信息 。 在 主要 的 搜索 引擎 上 注册 并 获得 最 理想 的 排名 ， 是 网 站 设计 
过 程 中 主要 考虑 的 问题 之 一 。 网 站 正式 发 布 后 尽快 提交 到 主要 的 搜索 引擎 ， 是 网 络 营销 的 基 
本 任务 。 

2. 博客 微 博 营销 

借助 于 网 络 博客 平台 的 营销 模式 ， 应 该 说 是 一 种 创新 的 营销 传播 渠道 ， 因 为 它 实 现 不 
了 即时 的 销售 ， 只 是 通过 一 种 新 的 媒介 方式 把 信息 传递 给 点 击 者 ， 同 时 ， 这 也 是 传播 ( 媒 
jr) 渠道 与 时 俱 进 的 表现 ， 是 网 络 营 销 的 一 种 创新 表现 ， 把 以 电子 邮件 为 主 的 网 络 营 销 从 虚 
所 的 区 后 扒 芭 更 加 真实 的 前 台 。 企 业 的 碑 营 销 、 博 客 与 其 他 相关 网 络 科技 的 结合 ， 就 是 博 
客 口 原 营销， 简称 为 博客 营销 ， 这 是 新 世代 的 新 契机 。 就 目前 的 网 络 环境 而 言 ， 博 客 并 不 适 
合用 来 做 短线 营销 ， 人 至 少 效 果 不 会 比 传统 的 “官方 网 站 ”好 多 少 。 原 因 很 简单 ， 博 客 营销 的 
重点 在 于 透 过 标题 列表 输出 、 响 应 、 引 用 三 项 基本 技术 ， 让 网 友 自 愿 为 营销 者 建立 紧密 的 人 磁 
铁 网 络 ， 以 吸引 大 量 的 网 友 ， 并 且 获 得 这 些 网 友 的 认同 ， 进 而 达到 营销 的 效果 。 即 使 营销 者 
使 用 博客 媒体 ， 但 如 果 没 有 使 用 这 些 技 术 来 进行 串联 ， 也 没有 足够 的 时 间 让 网 友 (目标 顾 
客 ) 之 间 建 并 认同 关系 ， 则 其 充其量 只 能 叫做 “布告 栏 ”。 

博客 共有 互动 性 、 知 识 性 、 共 享 性 等 特性 ， 也 正 是 这 些 特性 使 得 博客 成 为 一 种 乐于 被 
企业 利用 的 宣传 平台 。 企 业 通过 博客 这 一 载体 ， 将 企业 的 理念 、 品 牌 、 产 品 和 服务 等 信息 向 
浏览 者 进行 宣传 推广 和 交流 ， 在 这 一 过 程 中 ， 实 现 了 浏览 者 对 品牌 的 认 知 ， 也 提高 了 品牌 的 
知名 度 ， 对 企业 品牌 资产 的 提升 起 到 了 积极 的 作用 。 

时 下 微 博 这 个 概念 也 非常 的 火 ， 很 多 读者 可 能 也 不 大 清楚 博客 和 微 博 的 区 别 ， 微 博 即 
微 博客 (MicroBlog) 的 简称 ， 是 一 个 基于 用 户 关系 的 信息 分 享 、 传 播 以 及 获取 的 平台 ， 用 
Ce WAP 以 及 各 种 客户 端 组 件 进 入 个 人 社区 ， 以 140 字 左 右 的 文字 更 新 信 

， 并 实现 即时 分 享 。 可 以 这 么 说 ， 两 者 的 主要 区 别 就 在 于 发 布 的 文章 的 内 容 的 多 少 ， 显 然 
RR RUE LIE 因为 个 人 的 信息 量 相对 有 限 ， 而 企业 的 文化 内 
容 通常 都 是 包含 大 量 的 图 片 和 文字 的 。 微 博 营销 可 以 说 是 博客 营销 的 一 个 小 的 分 文 ， 做 好 了 
博客 营销 再 做 微 博 营销 就 易如反掌 了 。 


10.3 | 搜索 引擎 营 和 销 


统计 表明 ， 网 站 60% 的 访问 量 来 自 各 类 搜索 引擎 ， 因 此 ，Jadewen 嫁 衣 网 站 科学 地 登录 
各 大 搜索 引擎， 是 进行 网 站 推广 的 最 重要 的 内 容 ， 实 例 采 用 了 PPC CMH) fü SEO 
(搜索 引擎 优化 ) 两 个 工作 同时 进行 的 方法 。 
10.31 百度 的 竞价 排名 

PPC CEMER) Æ Pay Per Click 的 英文 首 字母 缩写 ， 可 意译 为 点 击 付费 竞价 广告 ， 典 
型 代表 是 Google Adwords 广告 以 及 百度 竞价 排名 ， 目 前 在 国内 使 用 百度 进行 关键 词 搜 索 的 


网 民 已 经 占 到 绝 大 多 数 ， 这 里 就 重点 以 百度 为 例 来 讲解 竞价 排名 的 知识 。 
1) 首先 让 我 们 一 起 来 了 解 一 下 百度 搜索 引擎 网 站 推广 的 方式 及 各 自 的 特点 ， 百 度 的 关 
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键 词 推广 主要 有 竞价 排名 和 火爆 地 带 两 种 ， 如 在 百度 搜索 关键 词 “婚纱 ”打开 的 页 面 如 
图 10-3 所 示 。 
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UA 时 光 | 试 衣 预 约 :010-58612370 
1 竞价 排名 ess dio 2013-03 - 7 


a ity IGI HHTME 
摄影 , 微 时 光 100% 满 意 度 造 明 消费 ,推动 全 新 拍 
四 春秋 最 完美 的 婚纱 照 首选 .咨询 电话 010-52663152 
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图 10-3 百度 的 两 种 推广 方式 


营销 指导 : 

百度 竞价 排名 ， 是 一 种 按 效 果 付 费 的 网 络 推广 方式 。 用 少量 的 投入 ， 就 可 以 给 网 站 带 
来 大 量 的 潜在 客户 ， 从 而 有 效 地 提高 企业 销售 额 和 品牌 知名 度 。 每 天 有 超过 数 亿 人 次 在 百度 
上 查找 信息 ， 所 以 商家 在 百度 注册 与 产品 相关 的 关键 词 后 ， 就 会 被 查找 这 些 产 品 的 潜在 客户 
找到 。 竞 价 排名 按照 给 网 站 带 来 的 潜在 客户 的 访问 数量 计 费 ， 可 以 灵活 地 控制 网 络 推 广 投 
入 ， 以 获得 最 大 的 回报 。 此 类 推广 根据 关键 词 的 不 同 ， 所 产生 的 费用 也 不 同 ， 是 按 点 击 量 付 
费 的 。 

百度 火爆 地 带 ， 是 一 种 针对 特定 关键 词 的 网 络 推广 方式 ， 按 时 间 段 国定 付费 ， 出 现在 
百度 网 页 搜索 结果 第 一 页 的 右 侧 ， 不 同 的 位 置 价格 也 不 同 。 购 买 了 火爆 地 带 关键 词 后 ， 就 会 
被 主动 查找 这 些 关键 词 的 用 户 找到 ， 从 而 给 商家 带 来 更 多 的 商业 机 会 。 

那么 ， 开 办 网 站 选择 哪 种 会 更 好 些 呢 ? 从 使 用 的 实用 性 出 发 ， 一 般 网 友 在 使 用 百度 查 
找 关键 词 后 习惯 于 单 击 左边 的 “ 竟 价 排名 ”部 分 , “火爆 地 带 ” 适 合 准 备 长 期 推广 品牌 形象 
的 商家 使 用 。 读 者 可 根据 自己 的 需求 ， 选 择 适 合 的 推广 方式 。 


2) 对 于 最 初 开始 创办 网 站 的 人 来 说 ， 适 合 使 用 竞价 排名 的 方式 推广 网 站 ， 而 且 费 用 也 
比较 合适 。 打 开 TE 浏览 器 输入 网 址 http://www.baidu.com/， 打 开 首 页 ， 单 击 页 面 上 的 “加 入 
百度 推广 ”打开 “百度 推广 官方 网 站 ”页 面 ， 如 图 10-4 所 示 。 

3) 单 击 页 面 中 的 “搜索 推广 ”打开 的 搜索 推广 页 面 如 图 10-5 所 示 。 

4) 通过 “在 线 咨询 ”和 “在 线 申请 ”功能 ， 按 其 步骤 即 可 完成 推广 的 操作 。 


营销 指导 : 


已 经 确定 选择 此 推广 方式 后 ， 就 要 直接 在 百度 上 注册 会 员 交纳 相关 费用 ， 或 者 直接 再 
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找 一 些 代 理 公 司 代理 推广 。 具体 的 过 程 在 这 里 就 不 做 介绍 了 ， 直 接 按 百 度 网 页 提示 操作 进行 
即 可 。 百 度 的 网 页 也 公示 了 其 开户 的 一 些 基本 要 求 和 费用 ， 如 图 10-6 所 示 。 


3 百度 推广 言 方 网 站 - Nicrosoft Internet Explorer 
XO) RRE 查看 0) KRU IAT) MEO 
ose- oO- 000r trar 名 | 合 - S (2 (8 
IRIE D) (Æ) http: /1/0 baidu com/?refer=533 
.e**, 


Bai ET am sa 


产品 服务 | 新 闻 动态 常见 问题 


TW PPHETERB , Wen : 


400-800-8888 


xcixirmu Tia B : 


还 可 以 ; 


免费 咨询 e 


Qaem ERATA 
EERS : 4008900088 askQbaidu.com 


。 覆 盖 95% 的 中 国 网 民 
全 球 量 大 的 中 文 搜索 引擎 , 每 天 驳 应 超过 50(Z 次 搜索 请 求 


。 精确 铅 定 有 需求 的 潜在 客户 


图 10-4 打开 的 竞价 排名 页 看 


IREM ”百度 推广 言 方 网 站 - 了 icrozoft Internet Explorer 
文件 C) ido FEV (GEO) IAT) 帮助 00 


omt- O- 32 Pss zez 0|2 a ma 
iit o) 


E http: s/e. baidu. coa/product/ 


90 i 
929 
Baicb TET Esen 百度 首页 SPER 
"rre 让 有 需求 的 客户 找到 你 


成 功 案例 新 闻 动 态 常见 间 题 虚拟 体验 中 心 


全 国 销售 和 热线 CER 


400-800-8888 
: 
EY 免费 咨询 推广 
mr mem mra LALEA 


Q miar 在 线 咨询 
MERAL 


同时 推广 产品 介绍 FARS RRES 其 好 推广 ”火爆 地 带 SMUE 图 片 推广 增值 工具 BSmsrge SPA amm 售后 服务 : .com 


潜在 客户 是 如 何 通过 搜索 引擎 找 上 门 的 ? 


图 10-5 搜索 推广 页 对 
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百度 搜索 推广 采取 预付 费 制 ， 首 次 开户 仅 需 乡 纳 5600 元 ， 其 中 包含 预存 推 
广 费 用 5000 元 ， 服 务 纳 600 元 (服务 费 和 预存 推广 质 根 据 地 区 悟 咒 可 能 有 所 
变动 ， 具 体 费 用 由 客户 和 服务 提供 方 另 行 约 定 ). 


按 点 击 付费 ， 每 次 点 击 费 用 取决 于 您 为 关键 词 设 定 的 出 价 、 关 键 词 的 质量 度 
和 排名 情况 ， 最 高 不 会 超过 您 为 关 狂 词 所 议定 的 出 价 . 


营 价 关键 词 的 调整 思路 : 


(1) 


不 至 于 太 低 。 需 要 整理 


键 词 ， 以 同样 的 策略 进行 调整 ， 从 而 最 终 让 百度 竞价 
(2) 梳理 低 流量 高 转换 的 关键 词 
也 可 以 以 一 周 为 周期 ， 每 周 我 们 的 账户 一 定 会 有 一 些 低 流量 人 


需要 我 们 去 特别 地 关注 ， 


这 个 词 。 


们 接 下 来 的 表现 。 如 果 转 化 一 直 不 错 ， 就 


周 


— 


Wl. 


做 法 就 是 将 他 人 


图 10-6 


不 管 它 是 一 时 的 原因 
门 的 位 置 提升 到 第 一 位 


化 ， 那 


再 进行 停 投 。 
通过 这 样 的 方式 ， 可 以 找到 很 多 高 转化 率 的 词 ， 这 类 词 累积 到 一 定量 的 时 候 ， 会 使 整 


期 性 地 调整 无 效 关 键 词 

建议 以 一 周 为 周期 ， 一 周 的 时 间 所 产 和 4 

出 每 一 周 消耗 前 列 的 关键 词 ， 并 | 

率 ， 转 化 率 低 的 果断 降价 和 暂停 。 通 过 这 样 的 方式 进行 调整 ， 

会 是 转化 率 不 错 的 关键 
当 消 耗 前 列 的 关键 词 的 转化 都 被 得 选 的 不 错 的 时 候 ， 则 需要 


百度 开户 费用 和 计 费 方式 


百度 竞价 账户 管理 过 程 中 ， 对 关键 词 进行 调整 是 非常 重要 的 ， 下 面 简单 介绍 一 下 百度 


E 的 数据 会 有 一 定 的 代表 性 ， 同 时 调整 的 频率 也 
昌 对 它们 进行 分 析 ， 看 它们 的 转化 


可 EA pul 


FE 消 耗 较 大 的 关键 词 都 


再 定位 消耗 下 一 阶 


RIX 


的 关键 词 的 总 体质 量 得 到 提升 。 


， 保 障 


个 百度 竞价 投放 的 转化 率 有 大 幅度 地 提升 。 


是 高 转化 的 词 ， 这 类 记 
还 是 真 的 会 有 高 转化 ， 我 们 都 应 该 去 重点 关注 
上 们 能 带 来 足够 的 流 
直 放 在 第 一 位 ， 如 果 发 现 只 是 当时 侦 然 的 高 转 


[a 
HR, 


然后 再 观察 他 


久 地 操作 的 。 控 掘 的 
精准 


(3) 开发 新 的 关键 词 
上 面 说 的 两 项 工作 都 是 需要 更 多 新 的 关键 词 的 支撑 ， 才 能 够 更 长 
新 词 ， 可 以 定期 定量 的 做 导入 ， 也 可 以 随时 进行 ， 总 之 ， 新 词 的 挖 抉 是 不 能 停 的 。 
的 匹配 方式 做 关键 词 的 挖 气 ， 必 须 及 时 地 做 出 调整 ， 否 则 会 让 你 既得 不 到 流量 ， 又 失去 
转化 。 
10.3.2 ”搜索 引擎 优化 


HI, P 


用 户 会 搜索 公司 名 或 网 站 名 ， 产 品名 称 如果 不 包 含 产 品 的 通 


定 适 当 的 关键 词 ， ] 户 搜索 次 数 达 到 一 


通过 竞价 排名 PPC， 很 多 企业 都 切身 感受 到 了 搜索 引擎 营 4 
费用 及 带 来 的 一 些 负 面 影 响 往 往 让 企业 望而却步 。 
来 开展 搜索 引擎 营销 ， 那 就 是 搜索 引擎 优化 “SEO)。 对 SEO 没 概念 的 人 在 决 


己 的 产品 名 称 ， 但 是 当 企 J 


肖 所 带 来 的 好 处 ， 但 其 昂贵 的 


现在 ， 有 一 种 成 本 更 低 、 上 [B] 


首先 要 做 的 是 ， 确 


认 


或 网 站 没有 品牌 知名 度 时 
名 称 ， 也 可 能 没 人 搜索 。 要 确 


及 更 高 的 方式 
日 标 关键 词 
， 没 有 


A- 


的 数量 级 。 在 这 方面 做 出 错误 
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的 方向 选择 ， 对 网 站 的 影响 将 会 是 灾难 性 的 。 经 过 核心 关键 词 确定 与 关键 词 扩展 ， 应 该 已 经 


得 到 一 个 至 少 包含 几 百 个 相关 关键 词 的 大 列表 ， 这 些 关 键 词 需要 合理 地 分 布 在 整个 网 站 上 。 


10.3.3 
想 要 对 网 站 进行 搜索 引擎 优化 ， 


选择 核心 关键 词 


肯定 先 要 为 网 站 的 页 面 选择 适当 的 关键 词 ， 之 后 围绕 


核心 关键 词 展 开 相关 的 工作 ， 以 使 关键 词 能 在 搜索 引擎 排名 


键 词 的 时 候 ， 往 往 会 选择 一 些 热度 非常 高 、 
是 ， 使 用 这 种 方法 也 是 要 i 


方法 无 可 厚 非 ， 但 
不 要 脱离 了 网 站 的 主题 内 容 。 


候 ， 


如 ， 


尚 流行 服装 。 百 度 关 键 字 工具 可 以 查询 特定 关键 词 
的 关键 词 是 那些 没有 被 广泛 小 


(1) 从 客户 的 角度 考虑 


潜在 客户 在 搜索 你 的 产品 时 将 使 月 


A ER 


PP 比较 靠 前 。 而 很 多 人 在 选择 关 
搜索 量 非 常 大 的 词 来 做 关键 词 ， 吸 引流 量 。 这 个 
究 方法 和 原则 的 。 我 们 选择 热度 关键 词 的 时 
关键 词 的 一 些 知识 。 


什么 关键 词 ? 这 可 以 从 众多 资源 中 获得 反馈 ， 例 


从 你 的 客户 、 供 应 商 、 品 牌 经 理 和 销售 人 员 那 里 获知 其 想法 。 
(2) 将 关键 词 扩展 成 一 系列 词组 和 短语 


尽量 不 要 用 单 


词汇 ， 而 是 在 单一 词汇 的 基础 上 进行 扩展 ， 如 : 服装 一 流行 服装 一 时 


(3) 进行 多 重 排列 组 合 


改变 短语 中 的 词 序 以 创建 不 同 的 词语 组 合 ， 或 者 使 


的 常见 查询 、 扩 展 匹 配 及 查询 热度 ， 最 好 
上 而 又 很 多 人 搜索 的 词 。 


不 常用 的 组 合 ， 或 者 组 合成 一 个 


问 句 。 短 语 中 可 以 包含 同义词 、 蔡 换 词 、 比 喻 词 和 常见 错 拼 词 ， 也 可 以 包含 所 卖 产 品 的 商标 


名 和 品名 。 另 外 ， 可 以 使 用 其 他 限定 词 来 创建 更 多 的 两 字 组 
意义 太 泛 的 关键 字 


Fy 


(4) 不 要 


HA, mdr. Wee. 


如 果 从 事 服装 设备 制造 ， 则 选择 “设备 ”作为 你 的 核心 关键 字 就 不 利于 吸引 到 目标 客 


实际 上 ， 为 了 准确 地 找到 需 


要 的 信息 ， 搜 索 月 


p 


He WHA) MAEA 


BERT 


“Jadewen” 强 的 多 ， 因 


键 词组 合 中 加 


词 ， 


着 你 


的 网 站 要 跟 更 多 的 网 站 竞 扫 
(5) 用 自己 的 品牌 做 关键 词 


如 果 是 知名 企业 ， 则 别 筷 了 在 关键 词 ， 
知名 的 品牌 ， 宜 以 企业 要 和 


肖 售 的 产品 


(6) 适当 使 用 地 理 位 置 


地 理 位 置 对 于 服务 于 地 方 性 的 企业 来 说 尤为 重要 。 
上 地 区 名 称 如 “北京 婚纱 ” 即 可 。 

| 的 关键 词 

查寻 竞争 者 的 关键 词 可 让 用 户 想 到 一 些 可 能 汤 掉 的 词组 ， 但 不 要 照抄 任何 人 的 关键 


C) 参考 竞争 者 使 


日 户 倾向 于 使 用 
j j 泛 的 概念 。 此 外 ， 使 用 意义 太 广 的 关键 字 ， 
排名 ， 更 加 难以 胜出 。 


使 用 你 的 公司 名 或 产品 品牌 名 称 。 
对 象 名 称 做 为 关键 词 。 如 使 月 
为 没有 人 知道 Jadewen 是 做 什么 的 ， 更 不 会 去 搜索 这 个 关键 词 。 


k 体 词汇 及 组 合 寻找 信息 
也 意味 


但 如 果 不 是 
晶 “ 流 行 婚 纱 ” 就 要 远 远 比 


如 果 业 务 范围 以 本 地 为 主 ， 则 在 关 


因为 并 不 清楚 他 们 如 何 要 使 


《8) 不 用 无 关 的 关键 字 


一 些 人 会 选择 将 热门 的 词汇 允 


j 这 些 关 键 词 ， 所 以 你 得 自己 想 关键 词 。 寻 找 别 人 的 关键 词 
只 是 为 了 对 已 经 选 好 的 关键 词 进行 补充 。 


I 入 自己 的 META 关键 字 中 ， 尽 管 这 个 热门 关键 字 跟 自己 


网 站 内 容 毫 不 相干 。 甚 至 有 人 把 竞争 对 手 的 品牌 也 加 入 到 自己 的 关键 字 中 ， 这 是 侵权 的 行 
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为 。 由 于 这 些 所 谓 的 “热门 ”词汇 并 未 在 网 站 内 容 中 出 现 ， 因 此 对 排名 并 无 实质 性 的 帮助 ， 


使 用 过 多 的 虚假 关键 词 还 可 能 会 受到 降低 排名 的 处 罚 。 


(9) 适当 控制 关键 词 数 量 
一 页 中 的 核心 关键 词 最 多 不 要 超过 3 个 为 佳 ， 然 后 所 有 内 容 都 必须 针对 这 几 个 核心 关 
键 词 展 开 ， 才 能 保证 关键 词 的 密度 合理 ， 搜 索引 擎 也 会 认为 该 页 主题 明确 。 如 果 确 实 有 大 量 


关键 词 需要 呈现 ， 可 以 分 散 写 在 其 他 页 面 上 并 针对 性 优化 ， 这 也 是 为 什么 首页 和 内 页 的 关键 


词 往往 要 有 所 区 分 的 原因 。 


要 确定 一 个 词 的 竞争 强度 是 比较 复杂 的 ， 需 要 参考 查询 的 数据 很 多 ， 而 且 很 多 数据 带 
有 比较 大 的 不 确定 性 。 根 据 搜索 次 数 和 竞争 程度 可 以 大 致 判断 出 关键 词 的 效能 。 在 相同 投入 
的 情况 下 ， 效 能 高 的 关键 词 获 得 排名 的 可 能 性 较 高 ， 同 时 可 以 带 来 更 多 的 流量 。 

综 上 所 述 ， 网 站 主 关 键 词 或 者 称 为 网 站 核心 关键 词 ， 既 不 能 太 长 、 太 宽泛 ， 也 不 能 太 
短 、 太 特殊 ， 需 要 找到 一 个 平衡 点 ， 才 能 达到 想 要 的 效果 。 

实例 中 定制 了 一 些 关 键 词 : 


婚纱 专卖 、 礼 服 专卖 、 婚 纱 礼服 专卖 、 晚 礼服 专卖 、 高 级 订 制 、 礼 服 订 做 、 礼 服 定 


做 、 婚 纱 订 做 、 婚 纱 定做 、 北 京 礼服 、 新 娘 礼 服 、 新 娘 婚 纱 、 婚 纱 、 礼 服 、 定 做 婚纱 礼服 、 
订 做 婚纱 礼服 、 北 京 婚纱 、 高 级 定做 、 高 级 订 做 婚纱 礼服 、 晚 礼服 、 婚 纱 用 品 、 北 京 婚纱 礼 


服 、 中 


国 婚纱 、 中 国 婚纱 网 、 婚 纱 设计 、 婚 纱 设计 网 、 婚 纱 礼服 、 婚 纱 礼服 网 、 礼 服 设计 、 


礼服 设计 网 、bridesmaids、bridal gowns、bridalwear、eveningwear、Bride、jade bridal, 


bridal 、 


exclusive 、femail、beijing、 newyork, london. paris. milan. wedding. wedding 


dress. china. dress. evening dress. gowns. 
在 浏览 器 中 打开 目标 网 页 ， 单 击 菜单 栏 上 的 “查看 ”一 “ 源 文件 ”一 “<meta name= 
keywords" content=” 后 面 的 文字 即 该 网 站 的 关键 词 ， 如 图 10-7 所 示 。 


,dress,euening dress, 
可 ion" t 


owns” > 
z" BR 


bridal gowns, bridalwear, even ` en l. 、exclusiue、femail、 
. paris. milan. wedding. wedding dress. china. dress. evening dress. gowns"? 


€tit1o» 15 t T dk c/title» 
«link rel:"stylesheet" type="text/css" href:"css/font.css"» 
«SCRIPT src:"style/article.js"»X/SCRIPT5 
<script src-"Scripts/swufobject modified.js" tupe-"text/jauascript"»X/script» 
<style type="text/css"> 
body ( 
margin-top: Opx; 


<table width="766" border="0" align="center” cellpadding="0" cellspacing:"0"> 
<tr> 
<td height="81" colspan="2" valign="bottom" background-"images/bannertop.gif"»«table width="766" 
height="78" border="0" cellspacing-:"0" cellpadding-"0"»5 
<tr> 
<td width="204" height:=”54">&nbsp;</td> 


图 10-7 定制 的 核心 关键 词 
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10.3.4 ”合理 分 布 关 键 词 


关键 词 密度 (Keyword Density) 也 叫 关键 词 频率 (Keyword Frequency)， 所 阐述 的 实质 
上 是 同一 个 概念 ， 它 是 用 来 量度 关键 词 在 网 页 上 出 现 的 总 次 数 与 其 他 文字 的 比例 的 ， 一 般 用 
百分比 表示 。 相 对 于 页 面 总 字数 而 言 ， 关 键 词 出 现 的 频率 越 高 ， 那 么 关键 词 密度 也 就 越 大 。 
简单 地 举 个 例子 ， 如 果 革 个 网 页 tA 100 个 词 ， 而 关键 词 在 其 中 出 现 5 次 ， 则 可 以 说 关键 词 
密度 为 5%。 

关键 字 密 度 的 算法 


T 


关键 字 密 度 = 关键 字 词 频 /网 页 总 词汇 量 

公式 中 的 总 词汇 是 指 页 面 程序 标签 (如 Html 标签 及 ASP, JSP, PHP 等 ) 以 外 的 所 有 
词汇 的 数量 。 
文 关键 字 密 度 一 般 在 6% 至 8% 之 间 较 为 合适 ， 超 过 这 一 标准 就 有 过 高 或 过 低 之 嫌 。 
切记 避免 进行 关键 字 堆 砌 ， 即 页 中 关键 子 的 出 现 个 是 根据 内 容 的 需要 而 安排 ， 而 是 为 了 讨 
好 搜索 引擎 人 而 堆积 关键 字 。 这 已 经 被 搜索 引擎 归 入 恶意 行为 ， 并 且 有 遭 到 惩 如 的 危险 。 就 
实施 惩罚 所 容许 的 关键 字 密 度 的 阔 值 而 言 ， 不 同 的 搜索 引擎 之 间 也 存在 不 同 的 容许 级 别 。 对 
过 度 优 化 如 关键 词 Spam 而 言 ， 不 同 的 搜索 引擎 所 容忍 的 闪 值 也 不 尽 相 同 ， 从 大 到 小 排列 大 
致 依次 是 : Googleg、MSN、 百 度 、sogou、iask、yahoo。 
搜索 引擎 分 析 网 页 时 ， 在 Html 源 代码 中 是 自 上 而 下 进行 的 ， 从 页 面 布局 的 角度 上 看 ， 
则 是 按 自 上 而 下 ， 从 左 到 右 的 顺序 进行 的 。 

下 面 我 们 就 介绍 一 下 关键 字 如 何在 具体 的 网 页 中 进行 分 布 是 最 有 效 的 。 

d) 网 页 代码 中 的 Title, META 标签 (关键 字 keywords 和 描述 description) 

«meta name-"keywords" content=" 婚 纱 专卖 、 礼 服 专 卖 、 婚 纱 礼服 专卖 、 晚 礼服 专卖 、 
高 级 订 制 、 礼 服 订 做 、 礼 服 定做 、 婚 纱 订 做 、 婚 纱 定做 、 北 京 礼服 、 新 女 礼 服 、 新 女 婚 纱 、 
婚纱 、 礼 服 、 定 做 婚纱 礼服 、 订 做 婚纱 礼服 、 北 京 婚纱 、 高 级 定做 、 高 级 订 做 婚纱 礼服 、 晚 
礼服 、 婚 纱 用 品 、 北 京 婚 纱 礼服 、 中 国 婚纱 、 中 国 婚纱 网 、 婚 纱 设计 、 婚 纱 设计 网 、 婚 纱 礼 
服 、 婚 纱 礼服 网 、 礼 服 设 计 、 礼 服 设 计 网 、bridesmaids、bridal gowns. bridalwear. evening- 
wear. Bride. jade bridal、bridal、exclusive、femail、beijing、newyork、london、paris、 


milan. wedding. wedding dress. china. dress. evening dress. gowns" 

«meta name-" description" content=" 礼 服 订 做 、 礼 服 定做 、 媚 纱 订 做 、 媚 纱 定做 、 北 京 礼 
服 、 新 娘 礼服 、 新 娘 婚 纱 、 婚 纱 、 礼 服 、 定 做 婚纱 礼服 、 订 做 婚纱 礼服 、 北 京 婚纱 、 高 级 定 
做 、 高 级 订 做 婚纱 礼服 、 晚 礼服 、 婚 纱 用 品 、 北 京 婚纱 礼服 、 中 国 婚纱 、 中 国 婚纱 网 、 婚 纱 
设计 、 婚 纱 设计 网 、 婚 纱 礼服 、 婚 纱 礼服 网 、 礼 服 设计 、 礼 服 设计 网 、 bridesmaids、bridal 
gowns. bridalwear. eveningwear. Bride. jade bridal. bridal. exclusive. femail. beijing. 


newyork, london. paris. milan. wedding. wedding dress. china. dress. evening dress. 
gowns" 

(2) 网 页 正文 最 吸引 注意 力 的 地 方 

正文 内 容 必须 适当 地 出 现 关 键 词 ， 并 且 有 所 侧重 ， 意 指 用 户 阅 读 习惯 形成 的 阅读 优先 
位 置 按 从 上 到 下 、 从 左 至 右 成 为 关键 词 重点 分 布 位 置 ， 包 括 : 页 面 靠 顶 部 、 左 侧 、 标 题 
文 前 200 字 以 内 。 在 这 些 地 方 出 现 关 键 词 对 排名 更 有 帮助 。 实 例 在 设计 的 时 候 充 分 考虑 到 
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了 关键 词 “ 婚 纱 ” 在 网 页 上 的 分 布 ， 使 其 出 现在 导航 、 新 闻 和 产品 的 名 称 中 (图 10-8)。 这 
里 要 特别 强调 的 是 新 闻 这 一 模块 ， 每 条 新 闻 的 标题 都 几乎 用 到 了 与 婚纱 相关 的 关键 词 ， 在 百 
度 搜索 的 时 候 可 以 搜索 到 相应 的 信息 。 


BE K 2013 年 3 月 21 日 SAN 
bridal couter 首页 i 县 j : 
Ed 
ü 
A. 
Es 
H 
3 
Ld 
BEER rS 
@ ss po; EE » 
用 户 : EE, fou qe6ESSERDUE 1 
Exi tem JESS RRE 
j | qeESemElDSERDeT i 
WRAWELEABRATAER 
& = Qc cc E 
JEL ri 
HP: 
z8: 
zx u:| | 2733 
E PIESE a] 
Q sss 


Jr 


图 10-8 ”关键 词 婚纱 在 首页 上 的 分 布 


G) 超 链 接 文本 〔 销 文本 ) 

除了 在 导航 、 网 站 地 图 、 销 文本 中 有 意识 地 使 用 关键 字 之 外 ， 还 可 以 人 为 地 增加 超 链 
接 文 本 。 这 也 值得 网 站 在 添加 友情 链接 时 做 参考 ， 即 链接 对 象 中 最 好 包含 有 关键 字 或 相关 语 
义 的 网 站 。 

(4) Header 标签 

Header 标签 即 正文 标题 <Hl><H1A 中 的 文字 。 搜 索引 擎 比较 重视 标题 行 中 的 文字 。 用 
<b></b> 加 粗 的 文字 往往 也 是 关键 词 出 现 的 地 方 。 

(5) RF Alt 属性 

搜索 引擎 不 能 抓 取 图 片 ， 因 此 制作 网 页 时 需要 在 图 片 属性 Alt 中 加 入 关键 字 ， 它 会 认 
为 该 图 片 内 容 与 你 的 关键 字 一 致 ， 从 而 有 利于 排名 。 


[ 赢 在 电子 商务 


— PHP+MySQL 电 商 网 站 设计 与 制作 


一 般 的 网 页 设计 都 


斑 一 个 


角度 考虑 ， 这 对 了 


1 网 页 设计 玫 


i 完 成。 设计 师 设计 网 站 往往 仅 从 美观 、 创 意 和 易 用 的 
期 望 获得 搜索 引擎 排名 优秀 的 商业 网 站 来 说 ， 已 经 远 远 不 够 了 ， 网 站 


策划 人 员 至 少 应 该 为 设计 师 递交 一 份 需求 备忘录 ， 提 醒 在 设计 中 需要 配合 和 注意 的 环节 。 


10.3.5 ”登录 门户 搜索 引擎 


门户 网 站 搜索 引擎 是 许多 普通 网 民 搜 索 和 发 现 新 网 站 的 重要 途径 ，Jadewen 嫁 衣 网 站 根 


通 网 民 面 前 。 其 中 各 大 门户 网 站 搜索 引 
较 好 的 关键 词 搜索 提 


F 名 位 置 ， 是 比较 理 


据 科学 选 定 的 关键 词 进行 网 站 登录 ， 能 够 有 效 地 提升 网 站 的 曝光 率 ， 使 网 站 快速 地 呈现 在 普 
擎 的 “推荐 登录 ”方式 能 够 让 Jadewen 嫁 衣 网 站 具有 


想 的 登录 方式 。 


登录 Google、 百 度 等 专业 搜索 引擎 : Google、 百 度 等 知名 专业 搜索 引擎 属于 自动 收录 


关键 词 的 广告 模式 ， 每 天 都 有 。 


能 够 被 搜索 引擎 自动 收录 ， 并 在 搜索 相关 关键 词 的 时 候 具 


有 较 好 的 搜索 引擎 
我 们 通过 做 好 Jadewen 尹 衣 网 站 的 ] 
内 ， 能 够 在 专业 搜索 引擎 具有 较为 到 


能 够 排名 前 列 。 


然 排 名 ， 这 将 极 大 地 促进 Jadewen 嫁 衣 网 站 的 营销 推广 和 自我 增值 。 
搜索 引擎 优化 工作 ， 促 使 网 站 自发 布 之 日 起 ， 三 个 月 
E 想 的 排名 ， 即 搜索 相关 关键 词 时 ，Jadewen 嫁 衣 网 站 


# 体 的 登录 搜索 引擎 工作 步骤 见 表 10-1。 


表 10-1 Jadewen 嫁 衣 网 站 登录 搜索 引擎 工作 


步 又 内 说 y 效果 评估 
1 确定 关键 词 确定 基本 关键 词 精确 定位 关键 词 
2 登录 门户 网 站 “新 浪 和 “搜狐 和 “网 易 ” 推 荐 型 网 站 登录 相关 关键 词 排名 前 列 
72 Ae Pod wk J 2 a A H 
3 登录 Google. mor ed 嫁 衣 网 站 的 搜索 引擎 优化 工作 ， 提 升 | 相关 关键 词 排名 前 列 
4 投放 Google、 百 度 关键 词 广告 投放 关键 词 广告 ， 增 加 网 站 曝光 率 相关 关键 词 排名 前 列 


此 外 ，Google、 百 度 等 知名 专业 搜索 引擎 也 提供 了 点 击 付费 模式 的 关键 词 广告 。 在 
Jadewen 嫁 衣 网 站 发 布 初期 ， 将 在 Google、 百 度 等 知名 专业 搜索 引擎 投放 关键 词 广告 。 根 据 


Jadewen 尹 衣 网 站 活动 的 
群 ， 能 够 有 效 地 提高 Jadewen 嫁 衣 网 站 的 访问 质 


c 


10.4 | 博客 微 博 营销 


可 以 说 ，Jadewen 品牌 是 笔者 接 刨 


台 就 得 到 她 的 信任 # 


VATER, Aia 
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受 她 的 委托 ， 共 同 精心 策划 3 
以 对 该 实例 的 剖析 来 看 一 下 博客 和 微 博 营销 所 带 来 的 市 场 效益 。 


10.41. 博客 安家 的 选择 


企业 的 一 些 朋 友 经 常 问 我 在 哪里 创建 博客 ， 创 建 博 客 后 博文 应 该 怎么 写 ， 博 客 的 栏 


展 过 程 选 择 相应 的 关键 词 投放 广告 ， 精 确 锁 定 网 站 的 目标 访问 


E 
Ho 


的 第 一 个 使 用 博客 和 微 博 营销 获得 成 功 的 品牌 ， 其 创 
始 人 小 文 女士 通过 几 年 的 努力 ， 将 她 的 婚纱 品牌 打造 成 了 国内 较 知 名 的 品牌 。 我 有 幸 从 一 开 


设计 实施 了 Jadewen 的 官方 网 站 、 博 客 和 


应 该 怎么 


分 类 


以 


及 博客 应 该 怎么 推广 等 问题 


是 想 建立 一 个 高 质量 的 独立 博客 却 不 是 那么 容易 的 。 独 立 博客 ， 真 正 做 成 功 的 比较 少 ， 
你 的 博客 就 可 以 向 成 功 的 优质 博客 迈进 一 大 步 。 

一 步 。 我 们 可 以 选择 关注 度 高 、 会 员 量 基数 大 的 大 型 网 站 ， 
客 以 后 ， 不 管 是 通过 关键 词 搜 索 还 是 博客 本 身 的 会 员 量 ， 
推广 都 是 可 以 直接 转化 成 自己 博客 的 最 有 效 访问 的 ， 有 这 个 ; 


如 果 注 意 一 下 如 下 几 个 方面 ， 
选择 网 站 是 创建 博客 的 第 
因为 创建 了 独立 博 


我 们 通过 


xt RAT) 


百度 搜索 关键 词 “ 博 


PELES EJ 


Nicros 


客 ” 就 可 以 一 


oft Internet Explorer 


X) RA IAT) WMO 
oa- O0O DAOP zera e 2-5 2 (8 
DEL 


e. 
e, 
Bait BE mo wm uz xar ms Ex Ss sm xw ome 


博客 百度 一 下 morgens rnm 


blog.cnfol.com 


加 博客 首页 -中 金 在 线 请 客 
最 具 人 气 的 博客 频道 .拥有 大 量 的 名 家 博客 ， TENE. 
MEISIE e ATTE e RERE 


LOFTER 网 易 轻 请 客 www.lofter.com 
简单 ,舒适 , 易 用 ,文艺 的 博客 ,精美 模板 ,保护 原创 ,汇聚 国内 优秀 的 创作 群体 


光 少 儿 英语 New Sun Shine 纯 外 教 3-6 人 小 班 www.nsskid.con 


， 我 想 说 的 是 ， 建 
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立 一 个 独立 博客 非常 容易 ， 但 


noun 


in; 
通州 博客 全 外 教授 课 , 美 式 教材 母语 课堂 ,3-6 人 小 班 教学 ， ERE. 外 教 一 对 一 


测 新 浪 博客 首页 SRI 
新 浪 网 博客 频 "vx DT 最 具 人 气 的 博客 频道 。 拥 有 最 给 照 的 娱乐 明星 博客 、 
最 知性 的 名 人 博客 、 
blog.sina.com.cn/ 2013-2-16 - H/A 


最 动人 的 情感 博客 ,最 自我 的 草根 博客 。 


博客 ,BLOG,QG e i #, QO 博客 ,QQ 空间 ,Qzone,Bloger, 博 客 频 道 ,名 人 博客 ,精英 博 


客 ,草根 博客 ,网 络 日 志 , 文 化 博客 ,思想 博客 ,企业 博客 ,商务 博客 , 符 色 博客 ,图 片 博客 ,播客 


blog.qq.com/ 2013-2-21 - E/S Ec FI 


8 网 易 博客 -网 易 


网 易 博 客 ,方便 、 易 用 、 


极 具 价值 的 网 络 个 人 表达 和 用 户 交 流 分 享 生活 平台 。 拥 有 2000 


0 多 套 精 美博 客 风格 ,4000 万 首 在 线 音乐 、 空 间 无 限 大 相册 、 个 性 冲印 等 优质 服务 。 免 


Wiki... 


因此 ， 这 里 我 会 优先 


你 自己 的 博 
10.4.2 


图 
E 荐 大 家 在 “3 


10-9 搜索 “ 博 


HA, 


"a 


但 是 


A 


思路 基础 就 变 得 4 
如 图 10-9 所 示 。 


博客 


MH 


"s. HPAES. ENSKIESON, S—N Xr ANS. FII 
KOLENA. mx HeoTTRAYSEX "EN 


Google: i] 


客 ” 的 结果 


新 浪 » &é 腾讯 » é 网 易 » 


客 ， 如 果 有 精力 的 话 ， 还 可 以 在 


品牌 博客 的 创建 
小 文 在 服装 学 院 学 服装 设计 的 时 候 ， 志 向 就 是 将 来 打造 一 个 属于 


iE 


过 一 定 手 段 的 
RÉT, KE 


三 大 自然 排名 的 网 站 上 建立 
其 他 一 些 知 名 的 博客 网 站 上 创建 自己 的 博客 。 


己 的 服装 品牌 ， 我 


也 是 在 创业 的 过 程 中 认识 她 的 ，2008 年 时 她 主动 找到 我 ， 咨 询 建立 品牌 官网 的 有 关 问 题 ， 
在 充分 了 解 她 的 一 些 产 品 设计 理念 以 及 她 的 目标 客户 群 后 ， 我 发 现 她 所 设计 的 婚纱 和 礼服 都 


是 高 档 的 产品 ， 目 标 客户 群 直接 锁定 的 是 高 端的 消费 群体 ， 这 和 现 阶段 互联 网 上 浏览 者 的 目 


标 客户 群 大 部 分 是 


的 婚纱 经 党 


我 一 下 子 想到 了 当时 大 部 分 明星 博客 正如 火 如 茶 ， 为 什么 


宣传 和 指导 


享 ， 起 到 引导 消费 的 作用 。 


HA 阶层 ， 收入 较 一 


般 的 网 民有 些 相 背 而 行 ， 在 聊 的 过 程 


被 一 些 大 牌 的 明星 选中 ， 和 “新 娘 杂 志 ?” 
上 使 用 的 Jadewen 品牌 婚纱 。 


的 博 


客 呢 ?建立 博客 后 ， 她 完全 


也 有 


FP 她 几 次 提 到 她 
深入 的 合作 ， 图 10-10 所 示 为 杂志 


` 尝 试 着 创办 一 个 针对 婚纱 


可 以 把 她 的 作品 及 设计 理念 在 博客 中 与 大 家 共 


325 


[ 赢 在 电子 商务 
— PHP+MySQL 电 商 网 站 设计 与 制作 


图 10-10 产品 的 明星 效应 


1) 在 确定 选择 主要 的 营销 思路 之 后 ， 第 一 步 就 是 选择 在 哪里 建立 博客 。 当 时 博客 在 国 
内 发 展 了 也 有 些 年 头 ， 也 有 很 多 的 博客 网 站 可 供 选 择 ， 但 是 由 于 新 浪 网 站 侧重 于 新 闻 娱 乐 ， 
对 博客 频道 建立 得 也 比较 早 ， 因 此 选择 了 在 新 浪 网 上 安家 落户 。 

2) 在 注册 的 时 候 要 注册 什么 博客 存在 着 不 同 的 意见 ， 小 文 希望 用 Jadewen 这 个 品牌 做 
博客 名 ， 这 样 方便 品牌 积累 和 品牌 的 推广 。 我 的 意见 是 以 “服装 设计 师 Jade” 为 博客 名 ， 
提出 的 思路 是 现 阶段 Jadewen 在 国内 的 知名 度 还 不 是 那么 高 ， 在 搜索 关键 词 的 时 候 几 乎 都 不 
可 能 有 人 去 搜索 品牌 名 ， 建 议 初 级 几 年 用 “服装 设计 师 ” 这 几 个 关键 字 ， 这 样 也 能 把 她 氛 为 
真正 的 “服装 设计 明星 ” 而 她 自己 就 用 她 的 英文 名 字 Jade 在 博客 中 显示 为 博 主 的 名 字 ， 当 
然 小 文 形象 也 不 错 ， 所 以 建议 她 放 上 她 自己 的 形象 。 这 样 博客 就 基本 有 了 一 个 定位 ， 即 主要 
以 宣传 和 包装 她 自己 来 做 这 个 博客 ， 这 样 也 方便 她 与 所 有 的 客户 直接 沟通 。 

3) 建立 博客 后 并 没有 对 网 页 的 模版 做 太 多 的 改动 ， 只 是 对 网 页 的 导航 背景 Banner 选择 
了 一 张 不 错 的 图 片 ， 如 图 10-11 所 示 。 


PorrassO 


博客 首页 | | 登录 | 注册 中 国 式 @ 祈 福 B 发 博文 wx VEZ 


服装 设计 师 Jade Wen 


http://blog.sirfa*com.cn/jade'enwen [订阅 ] [手机 订阅 ] 


/ 


图 10-11 博客 的 导航 背景 图 片 设计 


设计 指导 
之 所 以 选择 深 色 的 图 片 效果 ， 主 要 是 因为 产品 婚纱 都 是 和 白色， 选择 瞳 色 调 的 图 片 做 
景 能 够 衬 出 产品 婚纱 的 效果 ， 


4) 博客 创建 后 在 里 面 设计 什么 样 的 导航 ， 成 为 第 二 个 要 重点 考虑 的 问题 ， 如 果 像 其 他 
博客 一 样 只 是 简单 地 发 表 一 些 博 客 文章 那 就 没有 特色 了 ， 针 对 新 娘 在 采购 婚纱 时 所 要 考虑 的 
一 些 问题 以 及 自身 品牌 在 行业 的 影响 力 ， 特 别 将 博文 做 二 次 分 类 ， 如 下 : 
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明星 礼服 : 


FKF: 


杂 


3s 
P 


活 


志 拍 摄 : 
行 趋势 ; 
动 现场 ; 
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发 布 所 有 明星 试 装 或 者 使 用 Jadewen 品牌 的 效果 图 ， 这 也 算 


指导 新 娘 如 何 穿 漂亮 的 婚纱 以 及 介绍 如 何 打扮 等 专业 知识 。 
发 布 杂志 所 拍摄 产品 的 效果 图 片 ， 用 于 宣传 产品 ， 


同时 显示 产品 的 质量 。 


是 明星 效应 。 


撰写 设计 师 在 设计 产品 时 的 一 些 心得 ， 这 对 行业 有 一 定 的 指导 性 。 


举办 的 婚纱 秀和 设计 师 参 加 的 各 式 活动 的 现场 报道 。 


杂谈 : 报道 一 下 设计 师 参加 各 式 活 动 后 的 一 些 想法 。 


杂志 采访 : 


妆容 大 片 ， 撰写 新 娘 的 一 些 化 妆 技 巧 ， 这 能 提高 博客 的 访问 量 。 


设计 发 布 后 定期 加 一 些 文章 即 可 完成 博客 的 设计 ， 博 文 目 录 的 页 面 效 果 如 几 10712 所 示 。 


发 布 所 有 杂志 对 Jadewen 品牌 的 报道 文章 ， 提 高 品牌 含金量 。 


“ 2E (11) [ 


* 妆容 大 片 (5) 


ems (61) 
* 博文 收藏 (2) 


ELGA 


“明星 礼服 (31) * 图 ESE S mei a (5/794) 2012-12-17 19:59 

SpA 年 2 月 《时 尚 生活 》 采 访 国 (11/227) 2012-11-08 12145 
* 20127F2, v E 2-11- i 

< 杂志 拍摄 (24) NEED RW 

* 流行 趋势 (4) * Elit SARE users a (56/27927) 2012-1022 17:49 

< EDIR (0) Bom asgosssiogmuseral ai (22/17988) 2012-09-29 19:06 

* Sài (6) 

- Dos a2) ， 我 的 博客 今天 3 岁 49 天 了 ， 我 领取 了 … 国 (0/336) 


BHL cp (5/629) 
Elite HEVWSERSIRO Wi 


'BireuyossurcrE qo m 


图 博客 目录 页 面 


(25/2365) 


(84/30115) 


效果 


10-12 


全 部 | 国信 图片 | 的 合 视频 | ores 


2012-09-23 14106 
2012-08-22 20:31 
2012-08-15 10:38 


2012-08-10 11:52 


5) 单 有 这 样 的 博客 页 面 设 计 在 首页 看 上 去 还 是 很 单薄 的 ， 在 博文 首页 推荐 中 ， 建 议 在 
首页 的 左 侧 导 航 中 加 入 一 些 特 色 的 频道 ， 以 显示 出 Jadewen 的 品牌 知名 度 ， 所 以 加 入 了 “ 明 


做 到 明 


星 婚礼 ”和 “他 


Ej Jbte 


AE 


门 都 穿 JadeWen ”两 个 快速 导航 栏 ， 
如 图 10-13 所 示 。 

F jade WAWE - Hicrosoft Internet Explorer 

EPD deco EOD BRAO IAT) WE500 


oser- O- DAOR zer 0 2-3 [8 


Hi 0 (E) http://tlog. sina. con. en/jaderenmen 


/— prm us 
m m N ^ 
2009 年 12 月 12 日 | | O » L2" mm 
Tu BTUAHEL HOS M | 
Ex al Hoe | a 


AEhJadewen S RERS [1 
xA [ 


20085£118 16H | 
weaemuvSzuerézmaie | T 
云 的 红色 礼服 | = 

I: 


20085£48 17H 


| Da 
PEXCNORUXCISURIEAL X BUS ICT (8. | E TE R 
KAR - peu 
-l Eus 7 4 DOR [ 
| E (PO. pod py 
Pu XI » 美 妆 情人 节 


10-13 ”加 入 特色 栏目 的 首页 效果 


tmi) 
LJ 


下 子 就 把 首页 的 效果 突显 出 来 ， 真 正 
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通过 


寸 上 面 几 个 步 
博客 设计 和 一 般 的 网 站 建设 还 


混 的 简单 策划 ， 
不 同 的 地 方 的 ， 


是 有 


博客 整个 栏目 的 


定 要 围绕 着 目标 市 场 的 需求 出 发 ， 这 样 设计 出 来 的 博客 栏目 才 真正 有 意义 。 
10.4.3 ”撰写 优质 博客 文章 


EE 架 已 经 完成 ， 读 者 也 许 会 发 现 原 来 
特别 是 在 栏目 的 策划 上 ， 在 设计 博客 时 一 


在 博客 文章 内 容 的 撰写 这 块 ， 记 得 当初 就 和 小 文 沟通 过 文章 的 体例 要 求 ， 要 求 她 在 所 


写 博 


其 实 道理 很 简 六 


讨 过 。 


所 在 : 


FIKSES 
MERKTI fH 
一 组 Jade Wen 35 RIRKA RRIT AKT T 
DEILIR KA 


ab E, 
HIR 


差 


是 


大 红 


[^4 


LEHM, $ 


per 


消 在 每 模 


Ai 


， 像 神 
Pm 


新 浪 博 客 的 首页 上 ， 撰 写 的 内 容 如 下 ， 希 望 读者 能 从 她 的 博客 行文 ! 


客 文章 的 时 候 ， 一 是 内 容 要 实用 ， 二 是 尽量 多 用 图 “说 话 ”， 三 是 不 要 超过 两 页 以 上 ， 


关于 博文 的 撰写 要 求 在 前 面 “ 打 造 高 质量 的 博客 ”这 


这 一 小节 就 已 经 深入 探 


不 得 不 佩服 小 文 在 这 个 行业 的 专业 性 ， 她 撰写 的 第 一 篇 博文 就 一 直 被 新 浪 博 客 推 


着 在 


看 到 她 撰写 


博文 的 功力 


异域 风情 ， 个 性 十 足 的 另类 新 娘 


秘 的 金色 面具 、 
WARR, AW 


头 纱 、 


宽大 的 能 
秘 ， 如 同 介 


鸟 毛 和 美国 


AT D) 


i 女 ， 拥 有 神秘 
ER, EFE. 
图 


(图 10-14— 


被 转载 一 次 就 多 一 次 宣传 的 机 会 ， 


用 的 可 


aW 


创建 Jade Wen 35 ^R 44x, H 


IXE: 婚纱 设计 用 


庆 杂 志 拍 大 片 时 的 首选 。 
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图 10-14 EE 


DE 


( 


日 极 富 创 意 的 设计 灵感 和 纯 手 2 


| 登 在 《大 日 
面具 ， 就 如 同 强烈 的 爱 燃烧 的 能 能 火焰 炽热 而 光 目 ， 流 
EDS, BIER, AO 
色 面具 神秘 而 另类 
察 力 和 直觉 ， 游 走 在 善 

本 来 小 文 撰写 的 文章 就 到 上 再 
还 是 要 把 自己 的 个 人 简介 加 到 上 面 去 ， 


网 纱 裙 摆 


者 美 妙 的 音乐 在 梦 


Hur 


境 


、 梦 幻 的 网 纱 交 
里 翩翩 起 舞 。 这 


8 份 温暖 。 


EX 


T) 2 杂志 J 


且 强 大 的 力 


里， 


与 猫 


般 的 超凡 的 洞 


10-15 


博 


客 


10-16 为 文章 的 配 图 )， 在 最 后 我 建议 她 
因为 像 这 样 专业 的 技术 文章 被 转载 的 可 能 性 很 大 ， 每 
同时 在 所 有 的 图 片上 一 定 要 加 入 品牌 的 Logo， 要 不 被 盗 
能 性 也 很 大 ， 最 后 加 入 的 介绍 如 下 : 
图 10-17)， 北 京 服 装 学 院 服 装 设 计 专 业 毕 业 ，2002 年 
[使 Jade Wen 翡 歼 媒 衣 成 为 众多 婚 


Um 


第 10 章 ， 电 子 商务 网 站 的 运营 与 推广 | 


图 10-16 博客 图 片 三 图 10-17 设计 师 的 工作 照片 


在 博客 文章 发 布 后 除了 自身 博客 的 访问 点 击 之 外 ， 如 果 文 章 好 是 经 常 要 被 各 大 网 站 
转载 的 ， 如 上 述 发 布 的 文章 在 经 过 一 段 时 间 的 自动 转载 后 ， 用 百度 搜索 一 下 发 布 的 文章 
的 标题 ， 马 上 可 以 看 到 该 文章 已 经 被 有 效 地 真实 地 转载 了 25,100 次 (图 10-18)。 这 意 
着 有 近 25000 家 的 博客 或 者 网 站 蔡 你 做 了 宣传 ， 由 此 可 见 ， 博 客 营销 中 博客 文章 写 的 好 
才 是 王道 。 


JERR AMAN, T EHE 2E3XM8. - Hicrosoft Internet Explorer MAR) 
SO) MEO EFV RW IAT) 帮助 00 
Qste-oO-i36 Ps* Sen 6 2- S 0 (8 


Mc D) E) http /fr baida com x7 rd-XES YS C REC XESYSFYS FEES AGXSEXPE YA 3185 IEP ECE GBS XAAYES XSOXATYESYÉDYA!XPSYBOXR E T GANSA ES XAS XE YS YES YPe SS XS: M Ed AE BER o" 


近日 ,敌手 爱 需 为 全 新 MV 打 千 了 一 组 异域 风情 另 半 新 娘 这 型 。 造型 中 ,爱戴 疾 艳 的 异域 
风格 妆容 加 上 性 感 另 类 的 发 型 和 服饰 ,塑造 了 另 一 个 不 一 样 的 自己 ! 
www.99wed.com/fad wedding/view 15 17...2013-3-4- 百度 快照 


异域 风情 个 性 十 足 的 另类 新 娘 ( 组 图 )-- 中 国 广播 网 中 央 人 民 广 播 ... 
2010 年 9 月 9 日 - 这 是 一 组 JadeVVen 莫 时 嫁 衣 异 域 风 格 的 时 尚 大 片 , 刊 合 在 《大 日 子 》 
.… 爹 色 面具 神秘 而 另类 , 象 神奇 的 猫 女 ,拥有 神秘 且 强大 的 力量 ,与 猫 一 彼 的 超 


www.cnr.cn/allnews/201009/t20100909 ... 2010-9-9 - 百度 快照 


异域 风情 _ 个 性 十 足 的 另类 新 娘 - 耗子 1984 的 角落 - 西祠 胡同 

异域 风情 个 性 十 足 的 另类 新 娘 10-09-09 17:12 REF: (BE EN ME SIX. RE 
具 神 秘 而 另类 , 象 神奇 的 猫 女 ,拥有 神秘 且 强 大 的 力量 ,与 猫 一 般 的 超凡 的 洞察 力 … 
wwwxicinetu11577771/d1295608..htm 2010-9-13 - & / 8.88 


Prhe LT 


1253248526728 9 | 下 一 页 > Bmuitsg3i SC NER 1 


相关 搜索 我 的 另 兴 新 女 BHMA 民 城 风情 ES DURS TARM Wb sue cg sut 
BÜRDUARXOE 。 。 噶 域 风 情 手 抄 报 。 [CREEMDUR — FUDURODUES FANA fnit 


异域 风情 个 性 十 足 的 另类 新 娘 |, BE—F 


图 10-18 百度 博文 标题 跟踪 效果 


Jadewen 的 博客 从 创建 到 现在 一 共 写 了 111 篇 博文 ， 其 中 被 新 浪 推 荐 到 首页 或 者 其 他 频 
道 首页 的 有 61 篇 之 多 。 标 题 前 有 -个 “ 荐 ” 字 的 就 是 被 推荐 的 文章 (图 10-19)。 这 样 大 
大 提高 了 博客 的 访问 量 ， 是 该 博客 获得 成 功 的 最 大 推手 。 


J 
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博文 全 部 博文 (111) 

全 部 博文 (111) 25 | DAME |i aua! 图 手机 发 表 

" 明星 礼服 (31) - 国 2013 最 新 十 大 流行 趋势 回 (5/794) 2012-12-17 19:59 

ittm 2012 年 2 月 《时 尚 生活 》 采 访 (11/227) 2012-11-08 12:45 

- 杂志 拍 操 (24) DIETA RED Ec i 

- 流行 趋势 (4) " BAs SHAE VPE m (56/27927) 2012-10-22 17:49 

"活动 现场 (0) - GARE £9 B5 RR DER SEAT REERRT 22] 国 (22/17988) 2012-09-29 19:06 

- 杂谈 (6) 

. 杂志 采访 (12) - 我 的 博客 今天 3 岁 49 天 了 ， 我 领取 了 … 国 (0/336) 2012-09-23 14:06 

REAR (5) - ES EEREESUS (5/629) 2012-08-22 20:31 

"被 推荐 博文 (61) : BEAR HERREY E (25/2365) 2012-08-15 18:38 

“博文 收藏 (2) -Besumraseur--g do» m (84/30115) 2012-09-10 11:52 

特色 博文 : E3:5:8U 6E E (49/24398) 2012-08-05 17:37 
。 时 尚 为 名 ， 设 计 之 美 《数码 世界 》 杂 … 国 (6/843) 2012-04-08 14:52 

" 影评 博文 (0) 

- 365(0) B RAT 华丽 珠宝 点 亮 爱 之 旅程 加 (4/977) 2012-03-31 12:23 

图 部 分 文章 被 推荐 置顶 


在 管理 的 时 候 ， 单 击 “ 被 推荐 博文 ”链接 可 以 打开 被 推荐 的 详细 页 面 ， 里 面包 括 被 推 
荐 的 时 间 以 及 被 推荐 到 的 相应 频道 位 置 ， 方 便 博 主 进行 跟踪 分 析 ， 如 图 10-20 所 示 。 


FPPM jade WAME - Microsoft Internet Explorer 
IFT 编辑) SEV REA IAT) 帮助 00 
Q58-O-i9240 Pss że oe- S 5 FA 


Vet D) (E) http; /fblog sina. com. cr/s/article reconnended, 1267644467, 1. htal 


服装 设计 师 Jade Wen, 


http g.sríaxom.cn/jadeen TE] [手机 订阅 ] 


博文 签 推荐 博文 和 1) 。” 博 主 该 推荐 过 的 博文 


- 全 部 了 博文 (111) “。 国 2013 最 新 十 大 流行 趋势 国 女性 博客 2012-12-17 19:59 
* 明星 礼服 (31) 


- 穿 衣 学 堂 (14) 
， 杂 志 拍 操 (24) - HANE SERHAN E zieng 


“流行 趋势 (4) . 国庆 至 纯 吸引 力 回 去 性 博客 
* 活动 现场 (0) 

: 图 试 泳 后 BEVNEHRSIRU E 博客 首页 2012-08-15 19:38 
， BERE JSHUT+E 《 北 受 》… 国 博客 首页 2012-08-10 11:52 
- EaiRUUP RE I 博客 首页 2012-08-05 17:37 


HEREIN (61) - EAE AVRE. H52 m 女性 博客 2012-03-23 15:23 


- GAE SALE Liela aD 博客 首页 2012-10-22 17:49 


“博文 收藏 (2) - Biss «o7 Sha 女性 博客 2011-12-13 14:56 


Ae ESOS ENOE Gl 3 2011-11-25 14:20 


图 10-20 ”新浪 网 显示 被 推荐 的 位 


由 博客 文章 内 容 的 实际 应 用 可 以 看 到 ， 博 客 营销 的 成 功 与 否 在 于 文章 是 否 是 原创 ， 对 
该 行业 是 否 有 市 场 指 导 性 作用 。 


10.4.4 个 性 微 博 的 创建 


由 于 JadeWen 品牌 强调 的 是 个 性 化 的 量 喘 定 外 
营销 后 于 博客 营销 出 现 ， 在 微 博 这 种 平台 出 现 之 
微 博 ， 这 里 以 该 实例 的 创建 和 如 何 最 终 获得 影响 力 来 叙述 个 性 微 博 的 营 名 
而 言 ， 如 果 有 足够 的 时 间 和 精力 ， 注 册 一 个 或 多 个 “ 马 


操作 并 不 违背 上 章 所 讲 的 “真诚 原 见 


TS 


问题 ， 


第 10 章 ， 电 子 商务 网 站 的 运营 与 推广 | 


央 ， 对 设计 师 的 水 3 


” 一 个 人 有 多 方 


LH. C 


j 助 小 文 建立 


甲 ” 微 博 帐号 
和 的 兴趣 爱好 ， 


FEF 要 求 是 很 蜗 的 。 微 博 


并 宣传 她 自己 的 个 人 
肖 操作 。 对 个 人 用 广 
岂 是 有 利 的 一 一 这 个 
办 不 同 的 兴趣 爱好 会 
结交 不 同 的 朋友 圈子 ， 这 个 圈子 的 朋友 可 能 对 你 另外 一 个 圈子 的 事情 不 感 兴趣 ， 所 以 把 所 有 
圈子 里 的 事情 放 在 同一 个 帐号 下 发 布 将 对 你 的 粉丝 产 4 
类 似 一 个 QQ 帐号 下 建 多 个 QQ 群 ， 不 同类 别 的 信息 发 送 到 不 同 的 群 里 。 


JF 


E 干 扰 。 注 册 不 同 的 帐号 可 以 解决 这 个 
可 以 向 你 的 


好 友 公开 你 的 马甲 帐号 ， 也 可 以 不 公开 。 有 些 事情 你 想 记录 下 来 而 不 愿 让 别人 看 到 ， 或 是 怕 


打扰 别人 ， 注 册 一 个 私密 性 帐号 是 一 个 不 错 的 选择 。 
同样 ， 如 果 企 业 比 较 大 ， 部 门 比较 多 ， 不 妨 以 部 门 为 名 多 注册 几 个 实名 认 训 
个 方面 或 某 类 产品 的 信息 。 企 业 


号 ， 因 为 有 些 “ 观 众 ” 也 许 只 
号 都 应 该 是 实名 认证 的 ， 而 个 人 帐号 


对 企业 用 户 而 言 ， 另 外 重要 的 一 点 是 鼓励 企业 的 员工 在 微 博 上 开设 册 
然 的 ， 你 的 员工 的 粉丝 至 少 有 相当 的 比例 可 以 “转化 为 ”企业 的 粉丝 ， 


自己 的 公 


够 的 信心 让 员工 不 老 是 抱怨 


关注 你 企业 的 茶 


就 无 所 谓 了 。 


司 或 部 门 。 


小 文 在 狐 浪 微 博 也 建立 了 “新 浪 认 训 


所 示 。 


X3£JadeWen ama V (anus /meibo 
Hm £GEPAMMESOERAUNIS 时 尚 专 栏 作家 


Jadre dE f toL IR 
fc WEN 标签” 
VERE | 取消 

她 的 主页 个 人 资料 


图 


B ves 


con/ jadeven 


[S] ar 


10-21 注册 了 认证 微 博 


E” WZA LE JadeWen” 的 微 博 ， 如 


EHS 
户 的 多 个 


长 号 , 好 处 也 


IK 
IK 


s 
是 显 


注册 了 微 博 帐号 ， 在 微 博 上 寻找 陌生 的 “好 友 ” 之 前 ， 有 


1) 描述 自己 : JadeWen 高 级 定 
尚 专栏 作家 。 


BJ, 4 


以 下 几 件 事 要 做 。 


不 过 前 提 是 企业 有 足 


10-21 


莉 纱 礼服 设计 师 ， 多 家 时 尚 媒体 杂志 特 邀 顾问 ， 时 
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这 里 要 用 简练 的 语言 、 通 用 的 标签 描述 自己 的 行业 、 兴 趣 爱好 、 产 品类 型 及 产品 名 
称 。 新 浪 微 博 在 这 方面 提供 了 民 好 的 支持 ， 允 许 用 户 通过 标签 搜索 到 感 兴趣 帐号 。 

2) 联系 以 前 的 好 友 。 通 过 Email 等 即时 通信 工具 通知 以 前 的 联系 人 添加 自己 的 帐号 。 
如 果 以 前 的 好 友 中 己 经 有 人 在 微 博 上 建立 了 帐号 ， 尽 快 和 他 们 联系 ， 关 注 他 们 。 大 部 分 微 博 
平台 提供 这 样 的 支持 。 
3) 创作 几 个 有 创意 的 帖子 。 第 一 个 帖子 (图 10-22) 可 能 是 打招呼 的 ， 接 下 来 的 几 个 
贴 应 该 具有 新 意 ， 因 为 大 部 分 陌生 人 就 是 依据 你 这 窒 窒 数 贴 来 判断 是 否 应 该 关注 你 。 在 最 开 
台 能 有 一 个 轻 量 级 的 活动 将 会 很 不 错 。 


第 一 次 上 微 博 ， 还 看 到 些 朋 专 也 在 上 面 ， 挺 有 意思 。 
来 自 | G | #8 | 收藏 | 评论 加 


图 10-22 发布 的 第 一 个 帖子 


4) 请 求 好 友 转 发 。 微 博 还 是 一 个 新 鲜 事物 ， 一 般 情 况 下 ， 以 前 的 好 友 在 微 博 上 见 到 
你 会 有 些 惊喜 的 感觉 ， 所 以 愿意 关注 你 并 把 你 介绍 给 他 (她 的 粉 经 。 这 和 现实 中 的 交往 
类 似 。 

5) 去 寻找 陌生 人 中 的 潜在 好 友 。 寻 找 好 友 ， 就 是 寻找 “志同道合 ”之 人 。 陌 生 人 愿意 
关注 你 一 般 基 于 以 下 几 个 方面 的 理由 《分 别 以 个 人 帐户 和 企业 帐户 来 叙述 ): 

、 你 们 有 共同 的 兴趣 爱好 ， 有 共同 的 话题 可 谈 ; 

、 你 能 为 他 《她 ) 带 来 一 些 有 趣 、 实 用 的 信息 ， 前 者 如 幽默 段子 ， 情 感 格言 等 内 容 ， 
sain 页 域 的 新 闻 事件 等 内 容 ; 

、 你 有 个 性 魅力 ， 他 《她 ) 关注 你 的 生活 动态 ; 

Pepe SERE Ice 

企业 帐户 : 

对 企业 来 说 ， 只 要 企业 生产 的 产品 能 满足 一 部 分 人 的 需求 ， 你 就 一 定 能 在 微 博 上 找到 
真正 的 “粉丝 ”一 一 确实 对 你 的 产品 感 兴趣 的 微 博 用 户 。 

A、 是 你 的 产品 的 忠实 用 户 ， 和 希望 了 解 产 品 的 最 新 动态 信息 ; 

B、 企 业 产 品 的 用 户 希 望 在 微 博 上 迅捷 地 与 产品 客服 直接 交流 ， 提 出 自己 对 产品 的 建议 


C、 获 取 产 品 的 促销 、 打 折 等 信息 。 促 销 、 打 折 信 息 对 女性 尤其 具有 诱惑 力 ; 

D、 关 注 企 业 所 在 行业 的 新 闻 ， 媒 体 行 业 的 从 业者 与 行业 评论 的 作者 们 大 多 有 这 个 需求 ; 

E、 竞 争 对 手 也 会 访问 你 的 微 博 。 

基于 上 面 几 点 的 关注 是 真诚 的 关注 ， 而 有 些 关 注 则 是 策略 性 的 关注 ， 有 些 人 关注 你 是 
为 了 “交换 ”你 关注 他 《〈 她 )， 更 甚 的 是 一 旦 你 关注 他 《她 ) 后 ， 他 就 取消 关注 你 。 出 现 这 
种 策略 性 的 关注 主要 是 出 于 对 微 博 营 销 力 的 一 个 误解 :以 为 粉丝 越 多 ， 营 销 的 传播 力度 也 就 
越 大 。 其 实 ， 假 关注 对 增强 微 博 传播 的 影响 力 几乎 没有 什么 帮助 
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对 企业 账户 而 言 ， 微 博 营 销 的 初期 某 些 策略 性 的 关注 是 必要 的 。 


一 种 话语 权 的 不 平等 〈 你 说 话 我 听 ， 而 我 说 话 你 听 不 到 )， 


因为 单 向 关注 


E 归 是 


这 样 即 使 有 些微 博 用 户 对 你 的 产 


品 感 兴趣 也 会 因为 这 种 不 平等 的 感觉 而 取消 对 你 的 关注 。 而 一 旦 到 了 他 《她 ) 感觉 你 的 信息 
对 自己 真正 有 用 的 时 候 ， 这 种 不 平等 的 感觉 就 会 降低 ， 他 就 不 会 太 在 乎 你 是 否 关 注 他 


(她 )。 
10.4.5” 微 博 的 粉丝 策略 


衡量 微 博 营 销 是 否 成 功 很 重要 的 一 个 指标 是 粉丝 数 。 有 效 的 微 博 营 销 需要 付出 多 方面 
的 努力 ， 每 个 环节 的 失败 都 会 给 微 博 营销 带 来 负面 影响 ， 而 粉丝 数 是 一 个 综合 指标 ， 粉 丝 数 


越 多 音 味 着 微 博 营销 总 体 上 做 得 不 错 。 下 面 就 介 


1. 微 博 功能 定位 明确 


企业 和 个 人 可 以 注册 多 个 微 博 帐号 ， 每 个 帐号 各 司 其 职 。 


一 下 获得 粉丝 的 策略 和 方法 。 


一 个 微 博 帐 号 可 能 承担 相对 


单一 的 功能 ， 也 可 以 承担 多 个 功能 。 例 如 ， 如 果 你 的 企业 比较 大 ， 那 么 在 一 个 专 司 公共 关系 
的 微 博 帐 号 外 ， 建 立 多 个 部 门 微 博 帐号 是 可 取 的 。 如 果 你 的 企业 的 产品 比较 单一 ， 那 么 整个 


企业 建 一 个 微 博 帐 号 就 可 以 了 。 一 般 来 说 ， 一 个 微 博 帐 号 可 以 承担 新 产品 信息 发 布 、 
5 危机 公关 等 多 项 功能 角色 。 合 并 


动 推广 、 事 件 营销 、 产 品 客服 、 接 受 产品 用 户 建议 
还 是 分 拆 这 些 功能 角色 视 具体 情况 而 定 。 

2， 用 户 参与 微 博 的 理由 

如 果 企 业 的 产品 本 身 已 经 有 了 大 量 的 用 户 群 


易 的 。 但 是 如 果 企 业 并 不 具有 品牌 影响 力 ， 那 么 在 微 博 上 获得 “陌生 人 ”的 关注 


就 需要 付出 


更 大 的 努力 。 


与 反馈 及 


品牌 活 


那么 在 微 博 上 获取 他 们 的 关注 是 相对 容 


因此 我 们 首先 要 理解 微 博 用 户 的 社会 心理 需求 。 虽 然 没 有 


可 以 从 新 浪 “ 微 博 广 场 ” 的 热门 话题 了 解 到 大 部 分 
博 的 六 大 理由 : 
1) 获取 、 传 播 时 事 体育 等 新 闻 信息 。 

2) 获取 娱乐 信息 ， 参 与 “制造 ”娱乐 事件 。 
3) 人 生 感 悟 及 情绪 表达 。 

4) 政治 信息 及 价值 观 表 达 。 

5) 关注 自己 感 兴趣 的 人 的 动态 信息 。 

6) 关注 商业 、 产 品 等 实用 信息 。 


具体 的 数据 统计 ， 但 是 我 们 
普通 微 博 用户 “〈 非 微 博 营 销 用 户 ) 


参与 微 


以 上 理由 的 排序 大 致 是 普通 微 博 用 户 参 与 微 博 的 “动机 强度 ”排序 。 深 入 地 ] 


心理 ， 是 使 普通 用 户 成 为 你 粉丝 的 前 提 。 


3. 创造 有 价值 的 博文 


以 下 三 个 方面 做 些 调整 。 


有 价值 的 内 容 就 是 对 微 博 用 户 “ 有 用 ”的 内 容 ， 能 够 激发 微 博 有 
交流 的 热情 。 发 表 博 文 时 需要 平衡 产品 推广 信息 与 有 趣 性 的 “娱乐 信 ， 


解 这 些 


昌 户 的 阅读 、 参 与 互动 
昌 ” 的 比例 ， 可 以 先 


x 
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1) 发 布 本 行业 的 有 趣 的 新 闻 、 轶 事 。 可 以 客观 性 地 叙述 一 些 行业 公开 的 发 展 报道 、 统 
计 报 表 甚 至 “内 幕 ” 可 以 有 选择 性 地 提供 一 些 有 关公 司 的 独家 新 闻 一 一 真正 关注 你 的 产品 
的 微 博 用 户 会 对 这 些 独 家 新 闻 非 常 感 兴趣 。 当 然 ， 重 点 要 突出 新 闻 性 、 有 趣 性 。 如 小 文 发 布 
的 两 篇 趣味 微 博 ， 全 部 是 以 图 片 展示 为 主 ， 如 图 10-23 所 示 。 


Hauernxatto 
f OD 芝 查 看 大 图 | SIn | cen Hone party, 很 开心 遇 到 和 认识 很 多 新 朋友 。 1 是 是 


+ 收 起 | 忆 查 看 大 图 | ek | cma 


10-23 有趣 的 微 博 报道 

2) 发 布 创 业 口 述 史 。 大 多 数 普 通 人 对 创业 者 总 怀 有 一 种 好 奇 甚 至 尊敬 的 心态 。 企 业 微 
博 可 以 有 步骤 、 有 计划 地 令 述 自己 品牌 的 创业 历程 ， 或 公司 创始 人 的 一 些 公开 或 独家 的 新 
闻 类 似 一 部 企业 口述 史 或 电视 连续 纪录 片 。 如 小 文 发 布 的 报纸 对 她 的 报道 ， 通 过 第 三 
方 公信 地 报道 了 自己 的 创业 史 ， 如 图 10-24 所 示 。 


信 报 采访 


VR] 


A 


[EE | ZEEE | "向 左 转 | 向 右 转 


十 年 沉淀 婚纱 梦 


措 抄 设计 师 文 去 说 , 们 年 前 ,她 的 一 个 好 朋友 要 结婚 ,于 是 韶 陪 同 
起 选 购 婚纱 ,但 那个 年 代 别 说 一 件 好 者 的 婚 抄 了 ,就 连 一 个 像样 的 婚纱 店 
玫 事 容 无 几 。 于 是 服装 设计 科班 出 身 的 她 便 开 始 筹备 自己 的 婚 妙 设计 
2. meli 7 CÓ Jade Wen 碟 列 嫁 衣 ,个 性 创 章 加 上 纯 手 工 工艺 
使 Jade Wenig RHENE AREMAN. 
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图 10-24 ”发 表 自 己 的 创业 史 
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3) 发 布 与 本 行业 相关 的 产品 信息 。 搜 集 一 些 与 产品 相关 的 有 趣 的 创意 ， 有 幽默 感 的 文 


字 、 视 频 、 图 片 广告 ， 如 图 10-25 所 示 。 这 些 创 意 和 广告 不 一 定 都 是 你 自己 的 品牌 ， 可 以 是 


本 行业 公认 的 著名 品牌 ， 这 些 信息 可 以 大 胆 地 发 布 。 


2013 最 新 具有 未 来 感 的 闪 亮 金属 色 ， 鸭 这 季度 的 流行 越 势 添加 了 些 神 秘 感 。 人 金属 色 或 | 六 充 全 TOLE 
身 珠 片面 料 、 领 口 或 服装 部 分 亮片 效 饰 等 等 rex | mu 


tum | 巴 查 看 大 图 | "向 左 转 | rain 


xB8 Ò | 转发 8) | QR | 评论 6 


图 10-25 ”发 布 相关 的 产品 信息 


4. 创意 互动 微 博 营销 


上 面 说 的 是 微 博 内 容 方面 的 撰写 ， 还 有 比较 彻底 的 解决 方案 是 创意 式 地 发 表 一 些 互 动 
营销 ， 在 微 博 上 搞活 动 真正 符合 微 博 拟 人 化 互动 的 本 质 特征 。 下 面 列举 了 一 些 常 见 的 微 博 互 


动 活动 形态 。 
(1) 微 博 招 聘 


微 博 招 聘 有 四 大 优势 : 一 是 节约 了 相互 了 解 的 成 本 ， 可 以 通过 对 方 发 的 微 博 帖 子 阅 读 
对 方 ， 二 是 可 以 直接 在 微 博 上 进行 初次 “面试 ” 三 是 可 以 发 挥 人 际 传播 的 效应 ， 有 利于 微 


博 用 户 推 荐 合适 人 选 ， 四 是 品牌 传播 成 本 低 。 
(2) 产品 试用 


可 以 在 微 博 上 发 起 低 成 本 的 产品 试用 活动 ， 活 动 结束 后 训 励 试用 者 发 布 产 品 体验 帖子 。 


(3) 促销 互动 游戏 


尽量 多 做 与 产品 相关 的 互动 性 游戏 ， 如 秒杀 促销 、 抽 奖 等 游戏 ， 以 吸引 微 博 用 户 参 与 。 


(4) 奖励 发 言 


微 博 是 一 个 真正 的 口碑 营销 的 好 场所 。 可 以 直接 在 微 博 上 发 私信 ， 鼓 励 已 经 使 用 或 试 


用 产品 的 微 博 用 户 发 表 他 们 的 使 用 体验 ， 并 对 这 些 用 户 给 予 一 定 的 奖励 。 
(5) 公益 慈善 活动 


有 条 件 的 话 ， 可 以 自己 发 起 慈善 活动 ， 否 则 ， 也 可 以 积极 参与 微 博 其 他 


却 可 以 收获 很 大 的 关注 人 和 气 。 


1P AGE IIR 
SEE). INAR, xe WOA” za. JEANS AT BRK KARRA, 


总 之 ， 微 博 营 销 的 核心 是 与 感 兴趣 的 人 交流 互动 ， 并 在 互动 中 传播 自己 的 品牌 。 主 动 
寻找 那些 对 你 真正 感 兴趣 的 人 是 交流 互动 的 第 一 步 。 现 在 国内 的 大 多 数 微 博 平台 都 提供 了 
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日 我 
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HE 
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(kad; 


用 好 关键 词 则 是 一 
不 妨 试 试 。 


E 4 
需要 ] 


指出 的 是 ， 寻 找 好 友 贯 穿 微 博 营 


进来 ， 有 


些 人 会 出 去 。 


只 要 微 博 能 给 别人 带 


来 价值 ， 


播 ， 越 来 越 多 的 人 会 成 为 你 的 粉丝 。 


10.5 | 其 他 营销 推广 


常用 的 网 络 营 销 方法 除了 搜索 引擎 注 


息 发 布 、 邮 件 列表 、 


信 
频 营 销 、 论 坛 活动 营销 等 。 


10.51 积极 参与 展会 


据 了 解 ， 企 业 以 参加 
上 ， 同 时 还 大 大 缩短 了 促 和 


67 
部 分 贸 


1. 展会 前 的 工作 


许可 E-Mail 营销 、 


村、 个 性 


本 小 介绍 几 个 在 实际 运营 


展会 的 形式 拓 


易 机 会 和 寻求 合作 伙伴 的 。 


举办 或 者 参加 一 些 和 服装 与 婚纱 行业 有 关联 性 的 展会 。 


肖 的 整个 过 程 ， 


E 册 之 外 还 有 关键 词 搜 
WET ANH 
中 经 常 使 用 到 的 营销 推广 方法 。 


展 市 场 的 成 本 费 月 
肖 时 间 。 在 欧美 一 些 贸 易 大 


可 以 通过 帖子 关键 词 搜索 到 参与 某 个 话题 的 用 户 ， 操 作 很 简单 ， 


个 比较 复杂 的 过 程 ， 一 些微 博 平 台 如 新 浪 微 博 提 化 


在 随后 的 交流 互动 里 ， 有 
不 犯 大 错 ， 随 着 你 的 微 博 内 容 的 不 断 传 


索 、 


述 标签 搜索 到 对 某 一 方面 感 兴趣 的 用 户 ， 另 外 ， 


不 必 多 述 。 至 于 如 何 使 
t 了 推荐 好 友 的 功能 ， 


些 人 会 


网 络 广告 、 交 换 链接 、 


制 营 销 、 


昌 要 比 其 他 传统 
国 ， 绝 大 多 数 企业 都 是 从 展会 


病毒 性 营销 、 网 络 视 


形式 节省 40% 以 
上 获得 大 


展会 同时 也 是 参与 


设计 、 制 订 


RS E 


方案 。 


展会 设计 与 


展会 包装 


Eg 口 
T HH o 


宣传 展会 资 


料 的 编写 制作 。 


Zx Di 


展会 纪念 wh HH 
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inf Rs 
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2) 
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展 工 作 人 员 的 培 


yl. 


了 解 行业 的 发 展 趋势 ， 观 察 业内 的 发 展 动态 ， 
展 各 项 宣传 公关 工作 。 

积极 参与 展会 安排 的 各 项 行业 交流 活动 。 
展会 现场 进行 展品 的 演示 说 明 。 


合理 利用 信息 ， 跟 踪 客 户 。 
企业 发 展 战 略 。 


国际 市 场 竞 争 的 最 佳 场 所 。 所 以 我 们 要 


收集 各 种 有 


价 的 客户 信息 和 业内 信息 。 
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10.5.2 ”网 站 合作 推广 


策划 并 开展 网 站 合作 活动 是 有 效 的 网 站 推广 手段 ， 且 能 提高 访客 忠诚 度 ， 持 续 深入 地 
传播 网 站 。 广 泛 征 求 友 情 链 接 ， 扩 大 网 站 外 部 链接 活力 ， 能 增加 网 站 的 搜索 引擎 曝光 率 ， 获 
得 理想 的 排名 效果 。 与 网 上 、 网 下 媒体 展开 充分 合作 ， 撰 写 公关 文稿 ， 关 注 网 站 发 展 动态 
并 定期 同 其 他 网 站 进行 各 种 合作 是 效果 明显 的 网 站 推广 方式 ， 可 以 借 合 作 伙伴 的 力量 ， 促使 
Jadewen 巡 衣 网 站 的 系列 活动 有 效 地 开展 。 

Jadewen 嫁 衣 网 站 合作 推广 工作 见 表 10-2。 


表 10-2 合作 推广 工作 


类 W 说 n 效果 评估 
ix 100 个 各 类 网 站 的 友情 链接 ， 包 括 娱乐 、 资 讯 、 地 方 门户 、 个 人 | ”扩大 网 站 外 部 链接 活力 ， 促 进 
网 站 等 网 站 推广 
合作 开展 活动 寻求 地 方 门户 、 服 装 行业 等 网 站 就 Jadewen 嫁 衣 网 站 相关 活动 展 | ”扩大 网 站 活动 影响 ， 提 升 
开 合作 Jadewen 嫁 衣 网 站 形象 
公关 软文 围绕 Jadewen 嫁 衣 网 站 上 线 、 各 类 活动 开展 情况 等 撰写 公关 文稿 提升 Jadewen 嫁 衣 网 站 公众 知 
进行 网 站 推广 名 度 ， 扩 大 影响 度 


10.5.3 ”邮件 营销 推广 


邮件 营销 是 快速 、 高 效 的 营销 方式 ， 但 应 避免 成 为 垃圾 邮件 发 送 者 ， 应 参加 可 信任 的 
许可 邮件 营销 。 通 过 注册 会 员 、 过 往 客 户 、 电 子 杂 志 订 阅 用 户 等 途径 获取 客户 邮件 地 址 ， 向 
目标 客户 定期 发 送 邮 件 广告 ， 是 有 效 的 网 站 推广 方式 。 
建设 自己 的 邮件 列表 ， 定 期 制作 更 新 Jadewen 嫁 衣 网 站 最 新 线 上 活动 的 软文 ， 向 网 站 会 
员 和 其 他 用 户 发 送 ， 能 有 效 地 联系 网 站 访客 ， 提 高 用 户 忠 诚 度 


10.5.4 网 络 广告 推广 


对 传统 媒体 而 言 ， 网 络 媒 体 的 特点 在 于 它 的 全 能 性 及 在 打造 和 行销 方面 的 力量 。 网 络 
广告 的 载体 基本 上 是 多 媒体 、 超 文本 格式 文件 ， 只 要 受众 对 某 样 产品 、 某 个 企业 感 兴趣 ， 仅 
需 轻 按照 标 就 能 进一步 了 解 更 多 、 更 为 详细 、 生 动 的 信息 ， 从 而 使 消费 者 能 亲身 “体验 ” 产 
品 与 服务 ， 让 顾客 喘 临 其 境 般 地 感受 商品 或 服务 。 因 此 ， 网 络 广 告 又 具备 强烈 的 交互 性 与 感 
官 性 这 一 优势 。 

网 络 广告 是 投入 较 大 、 效 果 明 显 的 网 站 推广 方式 之 一 。 广 告 投放 对 象 选择 要 符合 网 站 
访问 群 特征 ， 并 根据 网 站 不 同 推广 阶段 的 需要 进行 调整 。 针 对 Jadewen 嫁 衣 网 站 的 特点 ， 制 
订 相 应 的 网 络 广 告 投放 计划 。 如 58 同城 服装 频道 (图 10-26 )。 

根据 Jadewen 嫁 衣 网 站 的 网 络 广告 投放 需要 ， 将 设计 规划 多 种 广告 形式 进行 广告 投放 。 

主要 广告 形式 有 飘浮 广告 、banner 广告、 文字 广告 等 。 
网 络 营 销 的 方法 并 不 限于 上 面 所 列举 的 内 容 ， 而 且 由 于 各 网 站 内 容 、 服 务 、 网 站 设计 
水 平等 方面 有 很 大 差别 ， 各 种 方法 对 不 同 的 网 站 所 发 挥 的 作用 也 会 有 所 差异 ， 网 络 营 销 效 果 
也 受到 很 多 因素 的 影响 ， 有 些 网 络 营 销 手段 甚至 并 不 适用 于 某 个 具体 的 网 站 ， 需 要 根据 企业 
的 具体 情况 选择 最 有 效 的 策略 。 
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WOGSHSU 拥有 十 多 年 的 互联 网 开发 与 营 
销 经 验 ， 精 通 企业 网 站 的 定位 、 品 牌 推广 策 
划 及 市 场 运营 。 创 办 环 博文 化 品牌 。 曾 经 策 
划 并 成 功 辅助 过 近 百 家 企业 网 站 的 建立 及 营 
销 推广 。 曾 主编 中 学 义务 教学 读本 《中 学 信 
息 技 术 课 本 》 七 、 八 、 九 年 级 ，《 北 京 市 民 
信息 化 网 络 实用 手册 》。 
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